Wrap Header actions on smaller screens

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

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

@@ -16,7 +16,7 @@
 
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, Tooltip, Typography } from '@material-ui/core';
+import { makeStyles, Tooltip, Typography, Grid } from '@material-ui/core';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
@@ -26,6 +26,8 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
     gridArea: 'pageHeader',
     padding: theme.spacing(3),
+    height: 'fit-content',
+    // Where does this number come from? :/
     minHeight: 118,
     width: '100%',
     boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
@@ -34,7 +36,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    justifyContent: 'flex-end',
     alignItems: 'center',
     backgroundImage: theme.page.backgroundImage,
     backgroundPosition: 'center',
@@ -42,6 +43,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   leftItemsBox: {
     flex: '1 1 auto',
+    marginBottom: theme.spacing(1),
   },
   rightItemsBox: {
     flex: '0 1 auto',
@@ -49,7 +51,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center',
-    marginRight: theme.spacing(1),
+    width: 'auto',
   },
   title: {
     color: theme.palette.bursts.fontColor,
@@ -213,7 +215,9 @@ export const Header = ({
           />
           <SubtitleFragment classes={classes} subtitle={subtitle} />
         </div>
-        <div className={classes.rightItemsBox}>{children}</div>
+        <Grid container className={classes.rightItemsBox} spacing={4}>
+          {children}
+        </Grid>
       </header>
     </>
   );

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

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { Link, makeStyles, Typography } from '@material-ui/core';
+import { Link, makeStyles, Typography, Grid } from '@material-ui/core';
 import React from 'react';
 
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'left',
-    margin: theme.spacing(2),
     display: 'inline-block',
   },
   label: {
@@ -64,9 +63,11 @@ export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
     />
   );
   return (
-    <span className={classes.root}>
-      <Typography className={classes.label}>{label}</Typography>
-      {url ? <Link href={url}>{content}</Link> : content}
-    </span>
+    <Grid item>
+      <span className={classes.root}>
+        <Typography className={classes.label}>{label}</Typography>
+        {url ? <Link href={url}>{content}</Link> : content}
+      </span>
+    </Grid>
   );
 };