From 4f9192223f5353734ef4d0ff940d5422f333525c Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 5 Jul 2021 15:37:36 +0200
Subject: [PATCH 1/3] Use Grid components for catalog layout

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../components/CatalogPage/CatalogPage.tsx    | 58 ++++++++-----------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index ba19d6036c..85855237fb 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   EntityKindPicker,
   EntityLifecyclePicker,
@@ -39,18 +39,6 @@ import {
   TableProps,
 } from '@backstage/core-components';
 
-const useStyles = makeStyles(theme => ({
-  contentWrapper: {
-    display: 'grid',
-    gridTemplateAreas: "'filters' 'table'",
-    gridTemplateColumns: '250px 1fr',
-    gridColumnGap: theme.spacing(2),
-  },
-  buttonSpacing: {
-    marginLeft: theme.spacing(2),
-  },
-}));
-
 export type CatalogPageProps = {
   initiallySelectedFilter?: UserListFilterKind;
   columns?: TableColumn<EntityRow>[];
@@ -61,30 +49,34 @@ export const CatalogPage = ({
   initiallySelectedFilter = 'owned',
   columns,
   actions,
-}: CatalogPageProps) => {
-  const styles = useStyles();
-
-  return (
-    <CatalogLayout>
-      <Content>
-        <ContentHeader title="Components">
-          <CreateComponentButton />
-          <SupportButton>All your software catalog entities</SupportButton>
-        </ContentHeader>
-        <div className={styles.contentWrapper}>
-          <EntityListProvider>
-            <div>
+}: CatalogPageProps) => (
+  <CatalogLayout>
+    <Content>
+      <ContentHeader title="Components">
+        <CreateComponentButton />
+        <SupportButton>All your software catalog entities</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={2}>
+        <EntityListProvider>
+          <Grid container item sm={12} lg={2} alignContent="flex-start">
+            <Grid item xs={12} sm={4} lg={12}>
               <EntityKindPicker initialFilter="component" hidden />
               <EntityTypePicker />
+            </Grid>
+            <Grid item xs={12} sm={4} lg={12}>
               <UserListPicker initialFilter={initiallySelectedFilter} />
+            </Grid>
+            <Grid item xs={12} sm={4} lg={12}>
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />
-            </div>
+            </Grid>
+          </Grid>
+          <Grid item xs={12} sm={12} lg={10}>
             <CatalogTable columns={columns} actions={actions} />
-          </EntityListProvider>
-        </div>
-      </Content>
-    </CatalogLayout>
-  );
-};
+          </Grid>
+        </EntityListProvider>
+      </Grid>
+    </Content>
+  </CatalogLayout>
+);

From ad5d05b6903dd4213777d4ef06eb04b4d1e29c81 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 6 Jul 2021 11:23:59 +0200
Subject: [PATCH 2/3] Add changeset

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/happy-pugs-notice.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/happy-pugs-notice.md

diff --git a/.changeset/happy-pugs-notice.md b/.changeset/happy-pugs-notice.md
new file mode 100644
index 0000000000..4120018da9
--- /dev/null
+++ b/.changeset/happy-pugs-notice.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Change catalog page layout to use Grid components to improve responsiveness

From b578be10f89470e8e19baceb268524034154f0fe Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 6 Jul 2021 17:16:52 +0200
Subject: [PATCH 3/3] Seperate Grid container & item in wrapped components to
 avoid wrong spacing

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../components/CatalogPage/CatalogPage.tsx    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 85855237fb..089e61f0fb 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -58,18 +58,20 @@ export const CatalogPage = ({
       </ContentHeader>
       <Grid container spacing={2}>
         <EntityListProvider>
-          <Grid container item sm={12} lg={2} alignContent="flex-start">
-            <Grid item xs={12} sm={4} lg={12}>
-              <EntityKindPicker initialFilter="component" hidden />
-              <EntityTypePicker />
-            </Grid>
-            <Grid item xs={12} sm={4} lg={12}>
-              <UserListPicker initialFilter={initiallySelectedFilter} />
-            </Grid>
-            <Grid item xs={12} sm={4} lg={12}>
-              <EntityOwnerPicker />
-              <EntityLifecyclePicker />
-              <EntityTagPicker />
+          <Grid item sm={12} lg={2} alignContent="flex-start">
+            <Grid container>
+              <Grid item xs={12} sm={4} lg={12}>
+                <EntityKindPicker initialFilter="component" hidden />
+                <EntityTypePicker />
+              </Grid>
+              <Grid item xs={12} sm={4} lg={12}>
+                <UserListPicker initialFilter={initiallySelectedFilter} />
+              </Grid>
+              <Grid item xs={12} sm={4} lg={12}>
+                <EntityOwnerPicker />
+                <EntityLifecyclePicker />
+                <EntityTagPicker />
+              </Grid>
             </Grid>
           </Grid>
           <Grid item xs={12} sm={12} lg={10}>