diff --git a/packages/web/src/components/ExecutionRow/index.tsx b/packages/web/src/components/ExecutionRow/index.tsx
index ae2038b6..ccabac6f 100644
--- a/packages/web/src/components/ExecutionRow/index.tsx
+++ b/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
-
{formatMessage('execution.executedAt', { datetime: relativeCreatedAt })}
-
+
-
+
theme.palette.primary.main }} />
-
+
diff --git a/packages/web/src/components/ExecutionRow/style.ts b/packages/web/src/components/ExecutionRow/style.ts
index 052482c6..e679040e 100644
--- a/packages/web/src/components/ExecutionRow/style.ts
+++ b/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"
- "title menu"
+ "apps arrow-container"
+ "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,
- maxWidth: '70%',
+ width: '100%',
+ maxWidth: '85%',
}));
export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({