fix: arrange mobile layout in ExecutionRow

packages/web/src/components/ExecutionRow/index.tsx

@@ -11,7 +11,7 @@ import type { IExecution } from '@automatisch/types';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import FlowAppIcons from 'components/FlowAppIcons';
-import { Apps, CardContent, Typography } from './style';
+import { Apps, CardContent, ArrowContainer, Title, Typography } from './style';
 
 type ExecutionRowProps = {
   execution: IExecution;
@@ -34,7 +34,7 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
               <FlowAppIcons steps={flow.steps} />
             </Apps>
 
-            <Stack
+            <Title
               justifyContent="center"
               alignItems="flex-start"
               spacing={1}
@@ -46,11 +46,11 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
               <Typography variant="caption" noWrap>
                 {formatMessage('execution.executedAt', { datetime: relativeCreatedAt })}
               </Typography>
-            </Stack>
+            </Title>
 
-            <Box>
+            <ArrowContainer>
               <ArrowForwardIosIcon sx={{ color: (theme) => theme.palette.primary.main }} />
-            </Box>
+            </ArrowContainer>
           </CardContent>
         </CardActionArea>
       </Card>

packages/web/src/components/ExecutionRow/style.ts

@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import MuiCardContent from '@mui/material/CardContent';
+import MuiBox from '@mui/material/Box';
 import MuiStack from '@mui/material/Stack';
 import MuiTypography from '@mui/material/Typography';
 
@@ -9,13 +10,13 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   gridTemplateColumns: 'calc(30px * 3 + 8px * 2) minmax(0, auto) min-content',
   gridGap: theme.spacing(2),
   gridTemplateAreas: `
-    "apps title menu"
+    "apps title arrow-container"
   `,
   alignItems: 'center',
   [theme.breakpoints.down('sm')]: {
     gridTemplateAreas: `
-      "apps menu"
+      "apps arrow-container"
-      "title menu"
+      "title arrow-container"
     `,
     gridTemplateColumns: 'minmax(0, auto) min-content',
     gridTemplateRows: 'auto auto',
@@ -25,11 +26,17 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
 export const Apps = styled(MuiStack)(() => ({
   gridArea: 'apps',
 }));
+export const Title = styled(MuiStack)(() => ({
+  gridArea: 'title',
+}));
 
+export const ArrowContainer = styled(MuiBox)(() => ({
+  gridArea: 'arrow-container',
+}));
 export const Typography = styled(MuiTypography)(() => ({
   display: 'inline-block',
-  width: 500,
+  width: '100%',
-  maxWidth: '70%',
+  maxWidth: '85%',
 }));
 
 export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({