diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx index 47a5da0d87..16cd5cb161 100644 --- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx +++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx @@ -42,7 +42,7 @@ const placeholderData = (theme: Theme, label?: string) => ({ }); const ChartWrapper = styled('div')({ - width: '90%', + width: '80%', }); export const PlaceholderFlagMetricsChart: React.FC<{ label?: string }> = ({ diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx index bce36d2e05..313286a091 100644 --- a/frontend/src/component/personalDashboard/Grid.tsx +++ b/frontend/src/component/personalDashboard/Grid.tsx @@ -9,7 +9,6 @@ const ContentGrid = styled('article')(({ theme }) => { return { backgroundColor: theme.palette.divider, borderRadius: `${theme.shape.borderRadiusLarge}px`, - overflow: 'hidden', gap: `1px`, display: 'flex', flexFlow: 'column nowrap', @@ -38,6 +37,7 @@ const onWideContainer = export const ProjectGrid = styled(ContentGrid)( onWideContainer({ gridTemplateColumns: '1fr 1fr 1fr', + gridTemplateRows: '410px auto', display: 'grid', gridTemplateAreas: ` "projects box1 box2" @@ -49,6 +49,7 @@ export const ProjectGrid = styled(ContentGrid)( export const FlagGrid = styled(ContentGrid)( onWideContainer({ gridTemplateColumns: '1fr 1fr 1fr', + gridTemplateRows: '450px', display: 'grid', gridTemplateAreas: ` "flags chart chart" @@ -60,6 +61,8 @@ export const GridItem = styled('div', { shouldForwardProp: (prop) => !['gridArea', 'sx'].includes(prop.toString()), })<{ gridArea: string }>(({ theme, gridArea }) => ({ padding: theme.spacing(2, 4), + maxHeight: '100%', + overflowY: 'auto', gridArea, })); @@ -67,6 +70,8 @@ export const SpacedGridItem = styled('div', { shouldForwardProp: (prop) => prop !== 'gridArea', })<{ gridArea: string }>(({ theme, gridArea }) => ({ padding: theme.spacing(3, 4), + maxHeight: '100%', + overflowY: 'auto', gridArea, })); diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx index 141cde3d12..fdb04de313 100644 --- a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx +++ b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx @@ -9,6 +9,9 @@ import { useLocationSettings } from 'hooks/useLocationSettings'; const Events = styled('ul')(({ theme }) => ({ padding: 0, alignItems: 'flex-start', + display: 'flex', + flexFlow: 'column nowrap', + gap: theme.spacing(2), })); const Event = styled('li')(({ theme }) => ({ @@ -16,8 +19,7 @@ const Event = styled('li')(({ theme }) => ({ padding: theme.spacing(0), display: 'inline-flex', gap: theme.spacing(2), - alignItems: 'center', - marginBottom: theme.spacing(4), + fontSize: theme.typography.body2.fontSize, '*': { fontWeight: 'normal', @@ -44,6 +46,10 @@ const Timestamp = styled('time')(({ theme }) => ({ marginBottom: theme.spacing(1), })); +const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({ + marginTop: theme.spacing(0.5), +})); + export const LatestProjectEvents: FC<{ latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents']; }> = ({ latestEvents }) => { @@ -64,10 +70,7 @@ export const LatestProjectEvents: FC<{ {latestEvents.map((event) => { return ( - +
{formatDateYMDHM( diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx index 2b66b1065e..5850f34f2f 100644 --- a/frontend/src/component/personalDashboard/MyProjects.tsx +++ b/frontend/src/component/personalDashboard/MyProjects.tsx @@ -201,7 +201,7 @@ export const MyProjects = forwardRef< {projects.map((project) => ( {