fix: use grid to prevent items overflow

Closes #453
sorry-cypress · Sep 21, 2021 · d51cd33 · d51cd33
1 parent 3349603
commit d51cd33
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/packages/dashboard/src/components/layout/sidebar.tsx b/packages/dashboard/src/components/layout/sidebar.tsx
@@ -99,7 +99,6 @@ const DrawerHeader = styled('div', { name: 'DrawerHeader' })(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
     justifyContent: 'center',
   },
-  padding: theme.spacing(0, 1),
   ...theme.mixins.toolbar,
 }));
 
@@ -116,6 +115,7 @@ const DrawerFooter = styled('div', {
   width: '100%',
   position: 'absolute',
   bottom: 0,
+  overflow: 'auto',
   padding: theme.spacing(0, 1),
   ...theme.mixins.toolbar,
 }));
@@ -145,7 +145,7 @@ export const ProjectListMenu: ProjectListMenuType = ({
   onItemClick,
 }) => {
   return (
-    <>
+    <div>
       {projects?.map((project) => {
         if (open) {
           return (
@@ -193,7 +193,7 @@ export const ProjectListMenu: ProjectListMenuType = ({
           </Tooltip>
         );
       })}
-    </>
+    </div>
   );
 };
 
@@ -315,7 +315,13 @@ export const Sidebar: SidebarType = ({ open, onToggleSidebar }) => {
   };
 
   const drawerContent = (
-    <>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateRows: `100px auto ${open ? '60px' : '160px'}`,
+        overflow: 'auto',
+      }}
+    >
       <DrawerHeader>
         <ListItem
           component="div"
@@ -399,6 +405,7 @@ export const Sidebar: SidebarType = ({ open, onToggleSidebar }) => {
           display: open ? 'block' : 'flex',
           flexDirection: 'column',
           alignItems: 'center',
+          overflow: 'auto',
         }}
       >
         <ListItem component="div">
@@ -582,7 +589,7 @@ export const Sidebar: SidebarType = ({ open, onToggleSidebar }) => {
           </Tooltip>
         </div>
       </DrawerFooter>
-    </>
+    </div>
   );
 
   const DrawerComponent = smallScreen ? MuiDrawer : Drawer;