From b7e25a3bb05dc879a6b60e82de05b09ab35ae78c Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 14 Jul 2021 18:01:23 +0200
Subject: [PATCH 1/9] Wrap Header actions on smaller screens

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/layout/Header/Header.tsx    | 12 ++++++++----
 .../src/layout/HeaderLabel/HeaderLabel.tsx          | 13 +++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 96d024f524..b02ba29d88 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/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>
     </>
   );
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index 1534656f24..c7adf23204 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/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>
   );
 };

From 5b0b5baa5e0b20596d8083197a00bbd605340d28 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 14 Jul 2021 18:52:03 +0200
Subject: [PATCH 2/9] Fix Grid in EntityPage for smaller screens

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../app/src/components/catalog/EntityPage.tsx | 30 ++++++++++++-------
 .../src/components/EmptyState/EmptyState.tsx  | 20 +++++++------
 .../components/EmptyState/EmptyStateImage.tsx |  2 +-
 plugins/api-docs/README.md                    | 16 +++++-----
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 16107a6cc0..7965561516 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -135,6 +135,12 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   );
 };
 
+/**
+ * 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.
+ */
+
 export const cicdContent = (
   <EntitySwitch>
     <EntitySwitch.Case if={isJenkinsAvailable}>
@@ -292,10 +298,10 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/api" title="API">
       <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityProvidedApisCard />
         </Grid>
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityConsumedApisCard />
         </Grid>
       </Grid>
@@ -303,10 +309,10 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
         </Grid>
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityDependsOnResourcesCard variant="gridItem" />
         </Grid>
       </Grid>
@@ -431,15 +437,17 @@ const apiPage = (
   <EntityLayoutWrapper>
     <EntityLayout.Route path="/" title="Overview">
       <Grid container spacing={3}>
-        <Grid item md={6}>
+        <Grid item xs={12}>
           <EntityAboutCard />
         </Grid>
-        <Grid container item md={12}>
-          <Grid item md={6}>
-            <EntityProvidingComponentsCard />
-          </Grid>
-          <Grid item md={6}>
-            <EntityConsumingComponentsCard />
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={12} md={6}>
+              <EntityProvidingComponentsCard />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <EntityConsumingComponentsCard />
+            </Grid>
           </Grid>
         </Grid>
       </Grid>
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 1d8d5a798f..5d55c5da93 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -49,15 +49,17 @@ export const EmptyState = ({ title, description, missing, action }: Props) => {
       className={classes.root}
       spacing={2}
     >
-      <Grid item container direction="column" xs={12} md={6}>
-        <Grid item>
-          <Typography variant="h5">{title}</Typography>
-        </Grid>
-        <Grid item>
-          <Typography variant="body1">{description}</Typography>
-        </Grid>
-        <Grid item className={classes.action}>
-          {action}
+      <Grid item xs={12} md={6}>
+        <Grid container direction="column">
+          <Grid item xs>
+            <Typography variant="h5">{title}</Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography variant="body1">{description}</Typography>
+          </Grid>
+          <Grid item xs className={classes.action}>
+            {action}
+          </Grid>
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
diff --git a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx
index a76f0863f7..660e7fc947 100644
--- a/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyStateImage.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
   generalImg: {
     width: '95%',
     zIndex: 2,
-    position: 'absolute',
+    position: 'relative',
     left: '50%',
     top: '50%',
     transform: 'translate(-50%, 15%)',
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index 60d8986d9b..d5ed198dc1 100644
--- a/plugins/api-docs/README.md
+++ b/plugins/api-docs/README.md
@@ -59,15 +59,17 @@ const apiPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
       <Grid container spacing={3}>
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityAboutCard />
         </Grid>
-        <Grid container item md={12}>
-          <Grid item md={6}>
-            <EntityProvidingComponentsCard />
-          </Grid>
-          <Grid item md={6}>
-            <EntityConsumingComponentsCard />
+        <Grid container>
+          <Grid item md={12}>
+            <Grid item xs={12} md={6}>
+              <EntityProvidingComponentsCard />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <EntityConsumingComponentsCard />
+            </Grid>
           </Grid>
         </Grid>
       </Grid>

From 5c4cc638549a3eae7489d5beba07b1e0db56e68d Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 15 Jul 2021 14:00:24 +0200
Subject: [PATCH 3/9] Use ellipsis in the header

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Header/Header.tsx              |  1 +
 .../components/EntityLayout/EntityLayout.tsx  | 39 ++++++++++++-------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index b02ba29d88..572f1f8c32 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -42,6 +42,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     backgroundSize: 'cover',
   },
   leftItemsBox: {
+    maxWidth: '100%',
     flex: '1 1 auto',
     marginBottom: theme.spacing(1),
   },
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index 9cb0b7c961..a5b85082cc 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -20,9 +20,17 @@ import {
   RELATION_OWNED_BY,
 } from '@backstage/catalog-model';
 import {
-  useElementFilter,
+  Content,
+  Header,
+  HeaderLabel,
+  Page,
+  Progress,
+  RoutedTabs,
+} from '@backstage/core-components';
+import {
   attachComponentData,
   IconComponent,
+  useElementFilter,
 } from '@backstage/core-plugin-api';
 import {
   EntityContext,
@@ -37,14 +45,6 @@ import { useNavigate } from 'react-router';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import {
-  Content,
-  Header,
-  HeaderLabel,
-  Page,
-  Progress,
-  RoutedTabs,
-} from '@backstage/core-components';
 
 type SubRoute = {
   path: string;
@@ -68,12 +68,21 @@ const EntityLayoutTitle = ({
 }: {
   title: string;
   entity: Entity | undefined;
-}) => (
-  <Box display="inline-flex" alignItems="center" height="1em">
-    {title}
-    {entity && <FavouriteEntity entity={entity} />}
-  </Box>
-);
+}) => {
+  return (
+    <Box display="inline-flex" alignItems="center" height="1em" maxWidth="100%">
+      <Box
+        component="span"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+        overflow="hidden"
+      >
+        {title}
+      </Box>
+      {entity && <FavouriteEntity entity={entity} />}
+    </Box>
+  );
+};
 
 const headerProps = (
   paramKind: string | undefined,

From bcfdd852c253091ded73e10da7ab9a6e3b8005a8 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 15 Jul 2021 15:12:16 +0200
Subject: [PATCH 4/9] Break error message text for docs on EntityPage

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../techdocs/src/reader/components/Reader.tsx    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index d63ddf8125..9dd8a2d656 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -19,7 +19,12 @@ import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import { BackstageTheme } from '@backstage/theme';
-import { Button, CircularProgress, useTheme } from '@material-ui/core';
+import {
+  Button,
+  CircularProgress,
+  makeStyles,
+  useTheme,
+} from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -45,10 +50,17 @@ type Props = {
   onReady?: () => void;
 };
 
+const useStyles = makeStyles<BackstageTheme>(() => ({
+  message: {
+    overflowWrap: 'anywhere',
+  },
+}));
+
 export const Reader = ({ entityId, onReady }: Props) => {
   const { kind, namespace, name } = entityId;
   const { '*': path } = useParams();
   const theme = useTheme<BackstageTheme>();
+  const classes = useStyles();
 
   const {
     state,
@@ -369,6 +381,7 @@ export const Reader = ({ entityId, onReady }: Props) => {
           variant="outlined"
           severity="error"
           action={<TechDocsBuildLogs buildLog={buildLog} />}
+          classes={{ message: classes.message }}
         >
           Building a newer version of this documentation failed.{' '}
           {syncErrorMessage}
@@ -381,6 +394,7 @@ export const Reader = ({ entityId, onReady }: Props) => {
               variant="outlined"
               severity="error"
               action={<TechDocsBuildLogs buildLog={buildLog} />}
+              classes={{ message: classes.message }}
             >
               Building a newer version of this documentation failed.{' '}
               {syncErrorMessage}

From 3b7ac8c9caab981a72d30447d1b6827cbd54cbee Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 15 Jul 2021 19:13:56 +0200
Subject: [PATCH 5/9] Fix styles to align text

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/layout/Header/Header.tsx           | 1 -
 packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 572f1f8c32..41729f682b 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -56,7 +56,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   title: {
     color: theme.palette.bursts.fontColor,
-    lineHeight: '1.0em',
     wordBreak: 'break-all',
     fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
     marginBottom: theme.spacing(1),
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index c7adf23204..8c3df0ba72 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     letterSpacing: 0,
     fontSize: 14,
     height: '16px',
-    marginBottom: 2,
+    marginBottom: 4,
   },
   value: {
     color: 'rgba(255, 255, 255, 0.8)',

From aa966c05d7b4915a99782304b272b41a61a03660 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Fri, 16 Jul 2021 15:37:21 +0200
Subject: [PATCH 6/9] Adjust header styles

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Header/Header.tsx              | 12 +++++++---
 .../src/layout/HeaderLabel/HeaderLabel.tsx    | 24 +++++++++++--------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 41729f682b..1af1e2cc2f 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -22,13 +22,14 @@ import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
 import { Breadcrumbs } from '../Breadcrumbs';
 
+const minHeaderHeight = 118;
+
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
     gridArea: 'pageHeader',
     padding: theme.spacing(3),
     height: 'fit-content',
-    // Where does this number come from? :/
-    minHeight: 118,
+    minHeight: minHeaderHeight,
     width: '100%',
     boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
     position: 'relative',
@@ -215,7 +216,12 @@ export const Header = ({
           />
           <SubtitleFragment classes={classes} subtitle={subtitle} />
         </div>
-        <Grid container className={classes.rightItemsBox} spacing={4}>
+        <Grid
+          component="div"
+          container
+          className={classes.rightItemsBox}
+          spacing={4}
+        >
           {children}
         </Grid>
       </header>
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index 8c3df0ba72..f9d8b4d345 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -23,19 +23,15 @@ const useStyles = makeStyles(theme => ({
     display: 'inline-block',
   },
   label: {
-    color: '#FFFFFF',
+    color: theme.palette.common.white,
     fontWeight: 'bold',
-    lineHeight: '16px',
     letterSpacing: 0,
-    fontSize: 14,
-    height: '16px',
-    marginBottom: 4,
+    fontSize: theme.typography.fontSize,
+    marginBottom: theme.spacing(1),
   },
   value: {
     color: 'rgba(255, 255, 255, 0.8)',
-    lineHeight: '16px',
-    fontSize: 14,
-    height: '16px',
+    fontSize: theme.typography.fontSize,
   },
 }));
 
@@ -65,8 +61,16 @@ export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
   return (
     <Grid item>
       <span className={classes.root}>
-        <Typography className={classes.label}>{label}</Typography>
-        {url ? <Link href={url}>{content}</Link> : content}
+        <Typography component="span" className={classes.label}>
+          {label}
+        </Typography>
+        {url ? (
+          <Link component="span" href={url}>
+            {content}
+          </Link>
+        ) : (
+          content
+        )}
       </span>
     </Grid>
   );

From 03bf17e9b82ab94d5a4efecb43f35143ff32d9e0 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Fri, 16 Jul 2021 16:19:22 +0200
Subject: [PATCH 7/9] Add changeset

Adjust HeaderLabel to use theme properties

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/poor-jars-sniff.md                   | 10 ++++++++++
 .../src/layout/HeaderLabel/HeaderLabel.tsx      | 17 +++++------------
 .../app/src/components/catalog/EntityPage.tsx   |  7 +++++++
 3 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/poor-jars-sniff.md

diff --git a/.changeset/poor-jars-sniff.md b/.changeset/poor-jars-sniff.md
new file mode 100644
index 0000000000..c45cd174a0
--- /dev/null
+++ b/.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.
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index f9d8b4d345..8557ceddf7 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/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>
   );
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index e3dd5be3c7..f7eb7c6349 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/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">

From c642324708b3e71e175adf2a6bea7d7f052749e3 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 19 Jul 2021 11:06:28 +0200
Subject: [PATCH 8/9] Legacy option for overflow wrap & update changeset bump

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/poor-jars-sniff.md                                  | 1 -
 packages/app/src/components/catalog/EntityPage.tsx             | 2 +-
 .../packages/app/src/components/catalog/EntityPage.tsx         | 2 +-
 plugins/techdocs/src/reader/components/Reader.tsx              | 3 +++
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/.changeset/poor-jars-sniff.md b/.changeset/poor-jars-sniff.md
index c45cd174a0..4c0c5d8133 100644
--- a/.changeset/poor-jars-sniff.md
+++ b/.changeset/poor-jars-sniff.md
@@ -1,5 +1,4 @@
 ---
-'example-app': patch
 '@backstage/core-components': patch
 '@backstage/create-app': patch
 '@backstage/plugin-api-docs': patch
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 7965561516..137b359afd 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -137,7 +137,7 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
 
 /**
  * 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
+ * such that the seperation of space is clear from the smallest screen size upwards
  * https://material-ui.com/components/grid/#basic-grid.
  */
 
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index f7eb7c6349..7ebbe53aa0 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -159,7 +159,7 @@ const websiteEntityPage = (
 
 /**
  * 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
+ * such that the seperation of space is clear from the smallest screen size upwards
  * https://material-ui.com/components/grid/#basic-grid.
  */
 
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 9dd8a2d656..3cecf4babe 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -52,6 +52,9 @@ type Props = {
 
 const useStyles = makeStyles<BackstageTheme>(() => ({
   message: {
+    // `word-break: break-word` is deprecated, but gives legacy support to browsers not supporting `overflow-wrap` yet
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
+    wordBreak: 'break-word',
     overflowWrap: 'anywhere',
   },
 }));

From dfcf5dbc1eee5f822083c14e9502c07f9b8846ec Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 20 Jul 2021 12:09:52 +0200
Subject: [PATCH 9/9] Improve documentation of change to enable a better
 responsive implementation by tusers

Clean up according to review

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/poor-jars-sniff.md                 |  8 +++++++-
 .../app/src/components/catalog/EntityPage.tsx |  5 +++--
 .../src/layout/Header/Header.tsx              | 20 +++++--------------
 .../app/src/components/catalog/EntityPage.tsx |  6 +++---
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/.changeset/poor-jars-sniff.md b/.changeset/poor-jars-sniff.md
index 4c0c5d8133..b2be713a93 100644
--- a/.changeset/poor-jars-sniff.md
+++ b/.changeset/poor-jars-sniff.md
@@ -1,9 +1,15 @@
 ---
 '@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.
+
+To benefit from the improved responsive layout, the `EntityPage` in existing Backstage applications should be updated to set the `xs` column size on each grid item in the page, as this does not default. For example:
+
+```diff
+-  <Grid item md={6}>
++  <Grid item xs={12} md={6}>
+```
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 137b359afd..4e2e32cc86 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -136,8 +136,9 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
 };
 
 /**
- * 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 smallest screen size upwards
+ * NOTE: This page is designed to work on small screens such as mobile devices.
+ * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`,
+ * since this does not default. If no breakpoints are used, the items will equitably share the asvailable space.
  * https://material-ui.com/components/grid/#basic-grid.
  */
 
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 1af1e2cc2f..227c6d1a60 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/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, Grid } from '@material-ui/core';
+import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
@@ -44,15 +44,10 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   leftItemsBox: {
     maxWidth: '100%',
-    flex: '1 1 auto',
+    flexGrow: 1,
     marginBottom: theme.spacing(1),
   },
   rightItemsBox: {
-    flex: '0 1 auto',
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
     width: 'auto',
   },
   title: {
@@ -202,7 +197,7 @@ export const Header = ({
     <>
       <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle} />
       <header style={style} className={classes.header}>
-        <div className={classes.leftItemsBox}>
+        <Box className={classes.leftItemsBox}>
           <TypeFragment
             classes={classes}
             type={type}
@@ -215,13 +210,8 @@ export const Header = ({
             tooltip={tooltip}
           />
           <SubtitleFragment classes={classes} subtitle={subtitle} />
-        </div>
-        <Grid
-          component="div"
-          container
-          className={classes.rightItemsBox}
-          spacing={4}
-        >
+        </Box>
+        <Grid container className={classes.rightItemsBox} spacing={4}>
           {children}
         </Grid>
       </header>
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index 7ebbe53aa0..2074a2712c 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -158,12 +158,12 @@ const websiteEntityPage = (
 );
 
 /**
- * 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 smallest screen size upwards
+ * NOTE: This page is designed to work on small screens such as mobile devices.
+ * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`,
+ * since this does not default. If no breakpoints are used, the items will equitably share the asvailable space.
  * https://material-ui.com/components/grid/#basic-grid.
  */
 
-
 const defaultEntityPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">