diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
index f66d51082d4e..51f2f0d22abf 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
@@ -32,53 +32,46 @@ const ItemContent = styled('span')(({ theme }) => ({
     },
 }));
 
-const ListItemRow = styled('li')(({ theme }) => {
-    const narrowListStyle = {
-        flexFlow: 'column',
-        alignItems: 'flex-start',
-        justifyContent: 'unset',
-        '& + li': {
-            marginTop: theme.spacing(5),
-        },
-    };
+const onNarrowWidget = (css: object) => ({
+    '@container (max-width: 400px)': css,
+    '@supports not (container-type: inline-size)': {
+        '@media (max-width: 400px)': css,
+    },
+});
 
+const ListItemRow = styled('li')(({ theme }) => {
     return {
-        '@container (max-width: 400px)': narrowListStyle,
-
-        '@supports not (container-type: inline-size)': {
-            [theme.breakpoints.down('sm')]: narrowListStyle,
-        },
-
         display: 'flex',
         flexFlow: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         gap: theme.spacing(1),
+
+        ...onNarrowWidget({
+            flexFlow: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'unset',
+            '& + li': {
+                marginTop: theme.spacing(5),
+            },
+        }),
     };
 });
 
-const ResourceList = styled('ul')(({ theme }) => {
-    const narrowStyles = {
-        'li + li': {
-            marginTop: theme.spacing(4),
-        },
-    };
+const ResourceList = styled('ul')(({ theme }) => ({
+    margin: 0,
+    listStyle: 'none',
+    padding: 0,
+    'li + li': {
+        marginTop: theme.spacing(2),
+    },
 
-    return {
-        margin: 0,
-        listStyle: 'none',
-        padding: 0,
+    ...onNarrowWidget({
         'li + li': {
-            marginTop: theme.spacing(2),
-        },
-
-        '@container (max-width: 400px)': narrowStyles,
-
-        '@supports not (container-type: inline-size)': {
-            [theme.breakpoints.down('sm')]: narrowStyles,
+            marginTop: theme.spacing(4),
         },
-    };
-});
+    }),
+}));
 
 export const ProjectResources = () => {
     const projectId = useRequiredPathParam('projectId');