style: add scrollbar (#2826)

packages/component/src/components/page-list/all-page.tsx

@@ -5,7 +5,7 @@ import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
 import { type CSSProperties } from 'react';
 
-import { Table, TableBody, TableCell, TableHead, TableHeadRow } from '../..';
+import { ScrollableContainer, Table, TableBody, TableCell, TableHead, TableHeadRow } from '../..';
 import { TableBodyRow } from '../../ui/table';
 import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
 import { AllPagesBody } from './all-pages-body';
@@ -121,13 +121,15 @@ export const PageList = ({
   const isSmallDevices = useIsSmallDevices();
   if (isSmallDevices) {
     return (
-      <AllPageListMobileView
-        isPublicWorkspace={isPublicWorkspace}
-        createNewPage={onCreateNewPage}
-        createNewEdgeless={onCreateNewEdgeless}
-        importFile={onImportFile}
-        list={sorter.data}
-      />
+      <ScrollableContainer inTableView>
+        <AllPageListMobileView
+          isPublicWorkspace={isPublicWorkspace}
+          createNewPage={onCreateNewPage}
+          createNewEdgeless={onCreateNewEdgeless}
+          importFile={onImportFile}
+          list={sorter.data}
+        />
+      </ScrollableContainer>
     );
   }
 
@@ -140,23 +142,30 @@ export const PageList = ({
       : undefined;
 
   return (
-    <StyledTableContainer ref={ref}>
-      <Table showBorder={hasScrollTop} style={{ maxHeight: '100%' }}>
-        <AllPagesHead
-          isPublicWorkspace={isPublicWorkspace}
-          sorter={sorter}
-          createNewPage={onCreateNewPage}
-          createNewEdgeless={onCreateNewEdgeless}
-          importFile={onImportFile}
-        />
-        <AllPagesBody
-          isPublicWorkspace={isPublicWorkspace}
-          groupKey={groupKey}
-          data={sorter.data}
-        />
-      </Table>
-      {sorter.data.length === 0 && fallback ? fallback : null}
+    sorter.data.length === 0 && fallback ?
+    <StyledTableContainer>
+     {fallback}
     </StyledTableContainer>
+   :
+    <ScrollableContainer inTableView>
+      <StyledTableContainer ref={ref}>
+        <Table showBorder={hasScrollTop} style={{ maxHeight: '100%' }}>
+          <AllPagesHead
+            isPublicWorkspace={isPublicWorkspace}
+            sorter={sorter}
+            createNewPage={onCreateNewPage}
+            createNewEdgeless={onCreateNewEdgeless}
+            importFile={onImportFile}
+          />
+          <AllPagesBody
+            
+            isPublicWorkspace={isPublicWorkspace}
+            groupKey={groupKey}
+            data={sorter.data}
+          />
+        </Table>
+      </StyledTableContainer>
+    </ScrollableContainer>
   );
 };
 
@@ -238,12 +247,18 @@ export const PageListTrashView: React.FC<{
   );
 
   return (
-    <StyledTableContainer ref={ref}>
-      <Table showBorder={hasScrollTop}>
-        <TrashListHead />
-        <TableBody>{ListItems}</TableBody>
-      </Table>
-      {list.length === 0 && fallback ? fallback : null}
+    list.length === 0 && fallback ?
+    <StyledTableContainer>
+    {fallback}
     </StyledTableContainer>
+  :
+    <ScrollableContainer inTableView>
+      <StyledTableContainer ref={ref}>
+        <Table showBorder={hasScrollTop}>
+          <TrashListHead />
+          <TableBody>{ListItems}</TableBody>
+        </Table>
+      </StyledTableContainer>
+    </ScrollableContainer>
   );
 };

packages/component/src/components/page-list/styles.ts

@@ -7,7 +7,6 @@ export const StyledTableContainer = styled('div')(({ theme }) => {
     height: '100%',
     padding: '0 32px 180px 32px',
     maxWidth: '100%',
-    overflowY: 'scroll',
     [theme.breakpoints.down('sm')]: {
       padding: '52px 0px',
       'tr > td:first-of-type': {