fix: section sizes (#8423)

This PR fixes issues with section sizes including:
- Jank when they change suddenly
- Overflowing list of admins / events
- Short lists that should stretch to the height of their container.

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 }> = ({

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,
 }));
 

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 (
                         <Event key={event.id}>
-                            <UserAvatar
-                                src={event.createdByImageUrl}
-                                sx={{ mt: 1 }}
-                            />
+                            <StyledUserAvatar src={event.createdByImageUrl} />
                             <div>
                                 <Timestamp dateTime={event.createdAt}>
                                     {formatDateYMDHM(

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -201,7 +201,7 @@ export const MyProjects = forwardRef<
                     <SpacedGridItem gridArea='projects'>
                         <List
                             disablePadding={true}
-                            sx={{ maxHeight: '400px', overflow: 'auto' }}
+                            sx={{ height: '100%', overflow: 'auto' }}
                         >
                             {projects.map((project) => (
                                 <ProjectListItem

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -389,7 +389,7 @@ export const PersonalDashboard = () => {
                                     <List
                                         disablePadding={true}
                                         sx={{
-                                            maxHeight: '400px',
+                                            height: '100%',
                                             overflow: 'auto',
                                         }}
                                     >