DRAMATIC CHANGE TO LAYOUT

web/src/components/ui/layouts/AppPageLayout.tsx

@@ -32,7 +32,7 @@ export const AppPageLayout: React.FC<
   return (
     <div
       className={cn(
-        'flex h-full w-full flex-col overflow-hidden',
+        'app-page-layout flex h-full w-full flex-col overflow-hidden',
         scrollable && 'overflow-y-auto',
         className
       )}>

web/src/components/ui/layouts/AppPageLayoutContent.tsx

@@ -11,6 +11,8 @@ export const AppPageLayoutContent: React.FC<
   const Selector = scrollable ? ScrollArea : 'main';
   const ChildSelector = scrollable ? 'main' : React.Fragment;
 
+  console.log('scrollable', scrollable);
+
   return (
     <Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}>
       <ChildSelector>{children}</ChildSelector>

web/src/controllers/CollectionListController/CollectionListController.tsx

@@ -18,6 +18,8 @@ export const CollectionListController: React.FC = () => {
 
   return (
     <AppPageLayout
+      className="swagswagswag"
+      scrollable={false}
       header={
         <CollectionListHeader
           setOpenNewCollectionModal={setOpenNewCollectionModal}

web/src/controllers/CollectionListController/CollectionsListContent.tsx

@@ -36,13 +36,11 @@ export const CollectionsListContent: React.FC<{
 
     return (
       <>
-        <AppPageLayoutContent>
         <CollectionList
           collectionsList={collectionsList}
           setOpenNewCollectionModal={setOpenNewCollectionModal}
           loadedCollections={isCollectionListFetched}
         />
-        </AppPageLayoutContent>
 
         <NewCollectionModal
           open={openNewCollectionModal}

web/src/controllers/DatasetsListController/DatasetListContent.tsx

@@ -78,7 +78,6 @@ export const DatasetListContent: React.FC<{
 
   return (
     <>
-      <AppPageLayoutContent>
       <BusterList
         columns={columns}
         rows={rows}
@@ -105,7 +104,6 @@ export const DatasetListContent: React.FC<{
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
       />
-      </AppPageLayoutContent>
     </>
   );
 });

web/src/controllers/TermIndividualController/TermIndividualContent.tsx

@@ -64,10 +64,7 @@ export const TermIndividualContent: React.FC<{
   }, [term?.name, term?.definition]);
 
   return (
-    <AppPageLayoutContent className="overflow-auto p-8">
+    <>
-      {loadingSelectedTerm ? (
-        <SkeletonLoader />
-      ) : (
       <div className="flex flex-col">
         <div className="flex justify-between space-x-3">
           <div className="mb-5 flex flex-col space-y-0.5">
@@ -143,15 +140,10 @@ export const TermIndividualContent: React.FC<{
           </ItemContainer>
         </div>
       </div>
-      )}
+    </>
-    </AppPageLayoutContent>
   );
 };
 
-const SkeletonLoader: React.FC = () => {
-  return <div className="p-4">{/* <Skeleton /> */}</div>;
-};
-
 const MoreDropdown: React.FC<{ termId: string }> = ({ termId }) => {
   const { mutateAsync: deleteTerm, isPending: isPendingDeleteTerm } = useDeleteTerm();
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);

web/src/controllers/TermsListController/TermsListController.tsx

@@ -66,7 +66,7 @@ export const TermsListController: React.FC<{
   });
 
   return (
-    <AppPageLayoutContent>
+    <>
       <BusterList
         rows={rows}
         columns={columns}
@@ -90,7 +90,7 @@ export const TermsListController: React.FC<{
         selectedRowKeys={selectedTermIds}
         onSelectChange={setSelectedTermIds}
       />
-    </AppPageLayoutContent>
+    </>
   );
 });