Add changeset

Adjust HeaderLabel to use theme properties

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

.changeset/poor-jars-sniff.md

@@ -0,0 +1,10 @@
+---
+'example-app': patch
+'@backstage/core-components': patch
+'@backstage/create-app': patch
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Improve the responsiveness of the EntityPage UI. With this the Header component should scale with the screen size & wrapping should not cause overflowing/blocking of links. Additionally enforce the Pages using the Grid Layout to use it across all screen sizes & to wrap as intended.

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

@@ -20,18 +20,19 @@ import React from 'react';
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'left',
-    display: 'inline-block',
   },
   label: {
     color: theme.palette.common.white,
     fontWeight: 'bold',
     letterSpacing: 0,
     fontSize: theme.typography.fontSize,
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1) / 2,
+    lineHeight: 1,
   },
   value: {
     color: 'rgba(255, 255, 255, 0.8)',
     fontSize: theme.typography.fontSize,
+    lineHeight: 1,
   },
 }));
 
@@ -61,16 +62,8 @@ export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
   return (
     <Grid item>
       <span className={classes.root}>
-        <Typography component="span" className={classes.label}>
-          {label}
-        </Typography>
-        {url ? (
-          <Link component="span" href={url}>
-            {content}
-          </Link>
-        ) : (
-          content
-        )}
+        <Typography className={classes.label}>{label}</Typography>
+        {url ? <Link href={url}>{content}</Link> : content}
       </span>
     </Grid>
   );

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -157,6 +157,13 @@ const websiteEntityPage = (
   </EntityLayout>
 );
 
+/**
+ * TODO: For the MUI Grid to work there have to be "xs" set on every GridItem,
+ * such that the seperation of space is clear from the smalles screen size upwards
+ * https://material-ui.com/components/grid/#basic-grid.
+ */
+
+
 const defaultEntityPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">