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] 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>