Improve History to show more Items per page

src/app/[locale]/dashboard/[id]/@savedData/TabsSelector.tsx

@@ -4,6 +4,7 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { useTranslations } from 'next-intl';
+import styles from './styles';
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
@@ -42,19 +43,20 @@ export default function TabsSelector({
   };
 
   return (
-    <Box px={2}>
+    <Box sx={styles.savedDataContainer} px={2}>
       <Tabs
         value={value}
         onChange={handleChange}
         aria-label="Data selector"
         variant="fullWidth"
         indicatorColor="secondary"
         textColor="secondary"
+        sx={styles.tabs}
       >
         <Tab label={translations('history')} />
         <Tab label={translations('savedBoards')} />
       </Tabs>
-      <Box>
+      <Box sx={styles.tabPanelSection}>
         <TabPanel value={value} index={0}>
           <>{history}</>
         </TabPanel>

src/app/[locale]/dashboard/[id]/@savedData/styles.ts

@@ -0,0 +1,15 @@
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+export default {
+  savedDataContainer: {
+    display: 'flex',
+    height: '100%',
+    flexDirection: 'column',
+  },
+  tabs: {
+    mb: 1,
+  },
+  tabPanelSection: {
+    overflow: 'auto',
+  },
+} satisfies Record<string, SxProps>;

src/app/[locale]/dashboard/[id]/layout.tsx

@@ -13,10 +13,6 @@ import NewBoardLink from './NewBoardLink/NewBoardLink';
 import styles from './styles';
 import { useTranslations } from 'next-intl';
 
-const xsSpacing = 3;
-
-const mdPadding = 0;
-
 const drawerWidth = 260; // Adjust this value as needed
 
 const sxStyles = {
@@ -35,6 +31,7 @@ const sxStyles = {
       backgroundColor: (theme: Theme) => theme.palette.grey[100],
       borderRight: '0',
       boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+      overflow: 'hidden',
     },
   },
   drawerTopBar: {
@@ -43,8 +40,10 @@ const sxStyles = {
     justifyContent: 'space-between',
     width: '100%',
     p: 1,
+    flexShrink: 0,
   },
   controls: {
+    minHeight: 0,
     px: 1,
     pb: 1,
   },
@@ -98,9 +97,7 @@ export default function Dashboard(props: {
           <OpenSideBarButton />
           <NewBoardLink />
         </Box>
-        <Box pb={{ xs: xsSpacing, md: mdPadding }}>
-          <Box sx={sxStyles.controls}>{props.savedData}</Box>
-        </Box>
+        <Box sx={sxStyles.controls}>{props.savedData}</Box>
       </Drawer>
 
       <Box

src/components/DataList/DataList.tsx

@@ -8,7 +8,7 @@ import DataItem from '@/components/DataItem/DataItem';
 import { BaseDataItemType } from '@/components/DataItem/DataItem';
 import styles from './styles';
 
-const ITEMS_PER_PAGE = 2;
+const ITEMS_PER_PAGE = 6;
 
 export default function DataList<DataItemType extends BaseDataItemType>({
   list,

src/components/DataList/styles.ts

@@ -8,6 +8,6 @@ export default {
     alignItems: 'center',
     width: '100%',
   },
-  list: { width: '100%' },
+  list: { width: '100%', pt: 0 },
   pagination: { paddingBottom: 1 },
 } satisfies Record<string, SxProps>;