[Header] remove flex wrap and add max width of characters for subtitle (#9180)

.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

packages/core-components/src/layout/Header/Header.tsx

@@ -49,11 +49,13 @@ const useStyles = makeStyles<BackstageTheme>(
       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<BackstageTheme>(
       opacity: 0.8,
       display: 'inline-block', // prevents margin collapse of adjacent siblings
       marginTop: theme.spacing(1),
+      maxWidth: '75ch',
     },
     type: {
       textTransform: 'uppercase',