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 77b84af275..9611999041 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -52,7 +52,7 @@ const useStyles = makeStyles< infoArea: { display: 'flex', flexFlow: 'column nowrap', - alignItems: 'flex-start', + alignItems: 'stretch', gap: theme.spacing(3), minWidth: 0, '& > *': { @@ -62,10 +62,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), }, @@ -96,7 +97,7 @@ const useStyles = makeStyles< }, summaryArea: { gridArea: 'summary', - marginBottom: theme.spacing(3), + margin: theme.spacing(1), // To counteract MUI negative grid margin }, infoArea: { gridArea: 'info', @@ -117,6 +118,9 @@ const useStyles = makeStyles< display: 'none', }, }, + summaryCard: { + width: 'auto', + }, }, }));