Responsive list

Switch to flexbox at smaller screen sizes, so each cell can wrap down as needed
SeedCompany · Sep 25, 2024 · d47c15a · d47c15a
1 parent 3e2b813
commit d47c15a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 23 deletions.
diff --git a/src/scenes/Projects/WorkflowEvents/WorkflowEventsDrawer.tsx b/src/scenes/Projects/WorkflowEvents/WorkflowEventsDrawer.tsx
@@ -15,7 +15,7 @@ export const WorkflowEventsDrawer = ({
       {
         '.MuiPaper-root': {
           p: 2,
-          left: { sm: 'unset', md: 248, lg: 'unset' },
+          maxWidth: '100vw',
         },
       },
       ...extendSx(props.sx),

diff --git a/src/scenes/Projects/WorkflowEvents/WorkflowEventsList.tsx b/src/scenes/Projects/WorkflowEvents/WorkflowEventsList.tsx
@@ -1,34 +1,58 @@
 import { ChevronRight } from '@mui/icons-material';
 import { Box, Divider, List, Typography } from '@mui/material';
-import { Fragment } from 'react';
 import { ProjectStepLabels, ProjectStepList } from '~/api/schema/enumLists';
 import { RelativeDateTime } from '~/components/Formatters';
 import { Link } from '~/components/Routing';
 import { TextChip } from '~/components/TextChip';
 import { ProjectWorkflowEventFragment as WorkflowEvent } from './projectWorkflowEvent.graphql';
 
+const gridAt = 'md' as const;
+
 export const WorkflowEventsList = ({
   events,
 }: {
   events: readonly WorkflowEvent[];
 }) => (
   <List
-    sx={{
-      display: 'grid',
-      rowGap: 1,
-      columnGap: 2,
-      alignItems: 'center',
-      gridTemplateColumns:
-        '[at] min-content [from] min-content [arrow] min-content [to] min-content',
-    }}
+    sx={(theme) => ({
+      display: 'flex',
+      flexDirection: 'column',
+      [theme.breakpoints.up(gridAt)]: {
+        display: 'grid',
+        rowGap: 1,
+        columnGap: 2,
+        alignItems: 'center',
+        gridTemplateColumns:
+          '[at] min-content [from] min-content [arrow] min-content [to] min-content',
+      },
+    })}
   >
     {events.toReversed().map((event, index, array) => {
       const prev = index >= 1 ? array[index - 1] : null;
       const prevStatus = prev ? prev.to : ProjectStepList[0]!;
 
       return (
-        <Fragment key={event.id}>
-          <Box sx={{ gridColumn: 'at' }}>
+        <Box
+          key={event.id}
+          sx={(theme) => ({
+            display: 'contents',
+            [theme.breakpoints.down(gridAt)]: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              gap: 1,
+              padding: 1,
+              borderBottom: `thin solid ${theme.palette.divider}`,
+            },
+          })}
+        >
+          <Box
+            sx={{
+              gridColumn: 'at',
+              // add a bit more row padding between the two
+              mr: { xs: 1, [gridAt]: 0 },
+            }}
+          >
             {event.who.value?.__typename === 'User' && (
               <Link to={`/users/${event.who.value.id}`} color="inherit">
                 {event.who.value.fullName}
@@ -38,18 +62,35 @@ export const WorkflowEventsList = ({
               <RelativeDateTime date={event.at} />
             </Typography>
           </Box>
-          <TextChip sx={{ gridColumn: 'from' }}>
-            {ProjectStepLabels[prevStatus]}
-          </TextChip>
-          <ChevronRight
-            sx={{ gridColumn: 'arrow', flexGrow: 0 }}
-            aria-label="transitioned to"
+          <Box
+            sx={(theme) => ({
+              display: 'contents',
+              [theme.breakpoints.down(gridAt)]: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                gap: 1,
+              },
+            })}
+          >
+            <TextChip sx={{ gridColumn: 'from' }}>
+              {ProjectStepLabels[prevStatus]}
+            </TextChip>
+            <ChevronRight
+              sx={{ gridColumn: 'arrow', flexGrow: 0 }}
+              aria-label="transitioned to"
+            />
+            <TextChip sx={{ gridColumn: 'to' }}>
+              {ProjectStepLabels[event.to]}
+            </TextChip>
+          </Box>
+          <Divider
+            sx={{
+              gridColumn: '1/-1',
+              display: { xs: 'none', [gridAt]: 'unset' },
+            }}
           />
-          <TextChip sx={{ gridColumn: 'to' }}>
-            {ProjectStepLabels[event.to]}
-          </TextChip>
-          <Divider sx={{ gridColumn: '1/-1' }} />
-        </Fragment>
+        </Box>
       );
     })}
   </List>