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 }) => ({