Add close button, fix layout, refactor (#8755)

This PR consists of cleanup for the project status modal as well as
adding the missing button.

I've added inline comments to explain the different steps.

It now looks like this:

![image](https://github.com/user-attachments/assets/29a3c0b7-770c-4019-aaed-b363c5804138)

frontend/src/component/project/Project/ProjectStatus/ProjectActivity.tsx

@@ -7,16 +7,9 @@ import { styled, Tooltip } from '@mui/material';
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center',
     alignItems: 'center',
-    gap: theme.spacing(2),
 }));
 
-const TitleContainer = styled('h4')({
-    margin: 0,
-    width: '100%',
-});
-
 type Output = { date: string; count: number; level: number };
 
 const ensureFullYearData = (data: Output[]): Output[] => {
@@ -93,7 +86,6 @@ export const ProjectActivity = () => {
         <>
             {data.activityCountByDate.length > 0 ? (
                 <StyledContainer>
-                    <TitleContainer>Activity in project</TitleContainer>
                     <ActivityCalendar
                         theme={explicitTheme}
                         data={fullData}

frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx

@@ -3,14 +3,7 @@ import { Link } from 'react-router-dom';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-
-const HealthContainer = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.envAccordion.expanded,
-    padding: theme.spacing(3),
-    borderRadius: theme.shape.borderRadiusExtraLarge,
-    minWidth: '300px',
-    gridArea: 'health',
-}));
+import { HealthGridTile } from './ProjectHealthGrid.styles';
 
 const TextContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -63,7 +56,7 @@ export const ProjectHealth = () => {
               : theme.palette.success.border;
 
     return (
-        <HealthContainer>
+        <HealthGridTile>
             <ChartRow>
                 <SVGWrapper>
                     <StyledSVG viewBox='0 0 100 100'>
@@ -111,6 +104,6 @@ export const ProjectHealth = () => {
                     )}
                 </TextContainer>
             </ChartRow>
-        </HealthContainer>
+        </HealthGridTile>
     );
 };

frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+
+export const HealthGridTile = styled('article')(({ theme }) => ({
+    backgroundColor: theme.palette.envAccordion.expanded,
+    padding: theme.spacing(3),
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+}));

frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.tsx

@@ -0,0 +1,57 @@
+import { ProjectHealth } from './ProjectHealth';
+import { styled } from '@mui/material';
+import { StaleFlags } from './StaleFlags';
+import { ProjectResources } from './ProjectResources';
+
+const onNarrowGrid = (css: object) => ({
+    '@container (max-width: 650px)': css,
+    '@supports not (container-type: inline-size)': {
+        '@media (max-width: 712px)': css,
+    },
+});
+
+const HealthContainer = styled('div')({
+    containerType: 'inline-size',
+});
+
+const HealthGrid = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateAreas: `
+        "health resources"
+        "stale resources"
+    `,
+    gridTemplateColumns: 'repeat(2, minmax(300px, 1fr))',
+    gap: theme.spacing(1, 2),
+    ...onNarrowGrid({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(1),
+    }),
+}));
+
+const Tile = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gridArea',
+})<{ gridArea: string }>(({ theme, gridArea }) => ({
+    gridArea,
+    '&>*': {
+        height: '100%',
+    },
+}));
+
+export const ProjectHealthGrid = () => {
+    return (
+        <HealthContainer>
+            <HealthGrid>
+                <Tile gridArea='health'>
+                    <ProjectHealth />
+                </Tile>
+                <Tile gridArea='stale'>
+                    <StaleFlags />
+                </Tile>
+                <Tile gridArea='resources'>
+                    <ProjectResources />
+                </Tile>
+            </HealthGrid>
+        </HealthContainer>
+    );
+};