diff --git a/.changeset/perfect-apples-act.md b/.changeset/perfect-apples-act.md new file mode 100644 index 0000000000..62579d1b1e --- /dev/null +++ b/.changeset/perfect-apples-act.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Updates styling of Header component by removing flex wrap and add max width of characters for subtitle diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 9ff0612b9f..deb4ab171b 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -49,11 +49,13 @@ const useStyles = makeStyles( zIndex: 100, display: 'flex', flexDirection: 'row', - flexWrap: 'wrap', alignItems: 'center', backgroundImage: theme.page.backgroundImage, backgroundPosition: 'center', backgroundSize: 'cover', + [theme.breakpoints.down('sm')]: { + flexWrap: 'wrap', + }, }, leftItemsBox: { maxWidth: '100%', @@ -73,6 +75,7 @@ const useStyles = makeStyles( opacity: 0.8, display: 'inline-block', // prevents margin collapse of adjacent siblings marginTop: theme.spacing(1), + maxWidth: '75ch', }, type: { textTransform: 'uppercase',