diff --git a/.changeset/lucky-parrots-yell.md b/.changeset/lucky-parrots-yell.md new file mode 100644 index 0000000000..7533ed6e56 --- /dev/null +++ b/.changeset/lucky-parrots-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fixed responsiveness issues with catalog entity content layout using the new frontend system. diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 01340037b4..d0bb4aeb8d 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -61,7 +61,7 @@ const useStyles = makeStyles< infoArea: { display: 'flex', flexFlow: 'column nowrap', - alignItems: 'flex-start', + alignItems: 'stretch', gap: theme.spacing(3), minWidth: 0, '& > *': { @@ -71,10 +71,11 @@ const useStyles = makeStyles< }, summaryArea: { minWidth: 0, - margin: theme.spacing(1.5), // To counteract MUI negative grid margin + margin: theme.spacing(1), // To counteract MUI negative grid margin }, summaryCard: { flex: '0 0 auto', + width: '100%', '& + &': { marginLeft: theme.spacing(3), }, @@ -105,7 +106,7 @@ const useStyles = makeStyles< }, summaryArea: { gridArea: 'summary', - marginBottom: theme.spacing(3), + margin: theme.spacing(1), // To counteract MUI negative grid margin }, infoArea: { gridArea: 'info', @@ -126,6 +127,9 @@ const useStyles = makeStyles< display: 'none', }, }, + summaryCard: { + width: 'auto', + }, }, }));