From 66015338238d852007cd4ede68d3b9291232ceb7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 11 Oct 2024 09:37:26 +0200
Subject: [PATCH] fix: use short lists on flex containers

---
 frontend/src/component/personalDashboard/Grid.tsx     | 11 ++++++++++-
 .../src/component/personalDashboard/MyProjects.tsx    |  9 +++------
 .../component/personalDashboard/PersonalDashboard.tsx |  9 +++------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx
index f5ff956eae..52d64a65a6 100644
--- a/frontend/src/component/personalDashboard/Grid.tsx
+++ b/frontend/src/component/personalDashboard/Grid.tsx
@@ -1,4 +1,4 @@
-import { Box, styled } from '@mui/material';
+import { Box, List, styled } from '@mui/material';
 import type { Theme } from '@mui/material/styles/createTheme';
 
 export const ContentGridContainer = styled('div')({
@@ -104,3 +104,12 @@ export const listItemStyle = (theme: Theme) => ({
     alignItems: 'flex-start',
     gap: theme.spacing(1),
 });
+
+export const StyledList = styled(List)(({ theme }) => ({
+    overflowY: 'auto',
+    maxHeight: '400px',
+
+    ...onWideContainer({
+        maxHeight: '100%',
+    })({ theme }),
+}));
diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
index 5850f34f2f..70062e4f7f 100644
--- a/frontend/src/component/personalDashboard/MyProjects.tsx
+++ b/frontend/src/component/personalDashboard/MyProjects.tsx
@@ -2,7 +2,6 @@ import {
     Box,
     IconButton,
     Link,
-    List,
     ListItem,
     ListItemButton,
     Typography,
@@ -28,6 +27,7 @@ import {
     ProjectGrid,
     GridItem,
     SpacedGridItem,
+    StyledList,
 } from './Grid';
 import { ContactAdmins, DataError } from './ProjectDetailsError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@@ -199,10 +199,7 @@ export const MyProjects = forwardRef<
             <ContentGridContainer ref={ref}>
                 <ProjectGrid>
                     <SpacedGridItem gridArea='projects'>
-                        <List
-                            disablePadding={true}
-                            sx={{ height: '100%', overflow: 'auto' }}
-                        >
+                        <StyledList>
                             {projects.map((project) => (
                                 <ProjectListItem
                                     key={project.id}
@@ -211,7 +208,7 @@ export const MyProjects = forwardRef<
                                     onClick={() => setActiveProject(project.id)}
                                 />
                             ))}
-                        </List>
+                        </StyledList>
                     </SpacedGridItem>
                     <SpacedGridItem gridArea='box1'>
                         {box1Content()}
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 7487d08794..aa6cbba79e 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -7,7 +7,6 @@ import {
     Button,
     IconButton,
     Link,
-    List,
     ListItem,
     ListItemButton,
     styled,
@@ -32,6 +31,7 @@ import {
     ListItemBox,
     listItemStyle,
     SpacedGridItem,
+    StyledList,
 } from './Grid';
 import { ContentGridNoProjects } from './ContentGridNoProjects';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -299,9 +299,6 @@ export const PersonalDashboard = () => {
         !detailsError && activeProjectStage === 'loading',
     );
 
-    const [createFlagDialogOpen, setCreateFlagDialogOpen] =
-        React.useState(false);
-
     return (
         <MainContent>
             <WelcomeSection>
@@ -386,7 +383,7 @@ export const PersonalDashboard = () => {
                             <SpacedGridItem gridArea='flags'>
                                 {personalDashboard &&
                                 personalDashboard.flags.length > 0 ? (
-                                    <List
+                                    <StyledList
                                         disablePadding={true}
                                         sx={{
                                             height: '100%',
@@ -406,7 +403,7 @@ export const PersonalDashboard = () => {
                                                 }
                                             />
                                         ))}
-                                    </List>
+                                    </StyledList>
                                 ) : activeProject ? (
                                     <NoActiveFlagsInfo>
                                         <Typography>