fix: adjust the height of the flag section (#8426)

This commit adjusts the height of the flag section in the personal
dashboard, so that the chart doesn't cause scrolling on the widest
version.

Before:

![image](https://github.com/user-attachments/assets/32a30338-b647-4458-bc09-604e821b30c7)

After:

![image](https://github.com/user-attachments/assets/c4760900-ef1b-4c45-b8aa-f81dff2a3a55)

Also fixes some issues in regards to super big lists when it goes into
flex mode and makes the chart more responsive

frontend/src/component/personalDashboard/FlagMetricsChart.tsx

@@ -42,7 +42,8 @@ const placeholderData = (theme: Theme, label?: string) => ({
 });
 
 const ChartWrapper = styled('div')({
-    width: '80%',
+    width: '100%',
+    flexGrow: 1,
 });
 
 export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({
@@ -185,6 +186,8 @@ const ChartContainer = styled('div')(({ theme }) => ({
     flexDirection: 'column',
     gap: theme.spacing(3),
     alignItems: 'center',
+    height: '100%',
+    justifyContent: 'space-between',
 }));
 
 const StyledExposure = styled(FlagExposure)({

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')({
@@ -49,7 +49,7 @@ export const ProjectGrid = styled(ContentGrid)(
 export const FlagGrid = styled(ContentGrid)(
     onWideContainer({
         gridTemplateColumns: '1fr 1fr 1fr',
-        gridTemplateRows: '450px',
+        gridTemplateRows: '410px',
         display: 'grid',
         gridTemplateAreas: `
                 "flags chart chart"
@@ -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 }),
+}));

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
+                        <StyledList>
-                            disablePadding={true}
-                            sx={{ height: '100%', overflow: 'auto' }}
-                        >
                             {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()}

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';
@@ -390,7 +390,7 @@ export const PersonalDashboard = () => {
                             <SpacedGridItem gridArea='flags'>
                                 {personalDashboard &&
                                 personalDashboard.flags.length > 0 ? (
-                                    <List
+                                    <StyledList
                                         disablePadding={true}
                                         sx={{
                                             height: '100%',
@@ -410,7 +410,7 @@ export const PersonalDashboard = () => {
                                                 }
                                             />
                                         ))}
-                                    </List>
+                                    </StyledList>
                                 ) : activeProject ? (
                                     <NoActiveFlagsInfo>
                                         <Typography>

frontend/src/component/personalDashboard/createChartOptions.ts

@@ -40,6 +40,7 @@ export const createPlaceholderBarChartOptions = (
         },
     },
     responsive: true,
+    maintainAspectRatio: false,
     scales: {
         x: {
             stacked: true,
@@ -78,7 +79,7 @@ export const createBarChartOptions = (
     hoursBack: number,
     locationSettings: ILocationSettings,
 ): ChartOptions<'bar'> => {
-    const { responsive, elements, interaction, scales } =
+    const { responsive, elements, interaction, scales, maintainAspectRatio } =
         createPlaceholderBarChartOptions(theme);
     return {
         plugins: {
@@ -153,6 +154,7 @@ export const createBarChartOptions = (
             },
         },
         responsive,
+        maintainAspectRatio,
         scales: {
             x: {
                 ...(scales ? scales.x : {}),