diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx index 16cd5cb161..9456556f43 100644 --- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx +++ b/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)({ diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx index 313286a091..11f25ecf3d 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')({ @@ -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 }), +})); 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< - + {projects.map((project) => ( setActiveProject(project.id)} /> ))} - + {box1Content()} diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index 9d70acadce..0a1f86bbe2 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'; @@ -390,7 +390,7 @@ export const PersonalDashboard = () => { {personalDashboard && personalDashboard.flags.length > 0 ? ( - { } /> ))} - + ) : activeProject ? ( diff --git a/frontend/src/component/personalDashboard/createChartOptions.ts b/frontend/src/component/personalDashboard/createChartOptions.ts index 881abdec56..e8897c501b 100644 --- a/frontend/src/component/personalDashboard/createChartOptions.ts +++ b/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 : {}),