From ae90534a449cc8f94b887db957d1b79f30147e11 Mon Sep 17 00:00:00 2001
From: benjdlambert <ben@blam.sh>
Date: Thu, 24 Jul 2025 09:53:07 +0200
Subject: [PATCH] chore: make this work with grid areas Signed-off-by:
 benjdlambert <ben@blam.sh>

---
 .../src/alpha/DefaultEntityContentLayout.tsx  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
index ecae71f2e5..4db4c05b6d 100644
--- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
+++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
@@ -79,23 +79,32 @@ const useStyles = makeStyles<
   },
   [theme.breakpoints.up('md')]: {
     root: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'flex-start',
+      display: 'grid',
       gap: theme.spacing(3),
+      gridTemplateAreas: ({ summaryCards }) => `
+        "${summaryCards ? 'summary' : 'content'} info"
+        "content info"
+      `,
+      gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),
+      alignItems: 'start',
     },
     mainContent: {
-      flex: '2 1 0',
-      minWidth: 0,
+      display: 'contents',
+    },
+    contentArea: {
+      gridArea: 'content',
+    },
+    summaryArea: {
+      gridArea: 'summary',
+      marginBottom: theme.spacing(3),
     },
     infoArea: {
-      flex: '0 0 auto',
-      width: '33.333%',
+      gridArea: 'info',
       position: 'sticky',
       top: theme.spacing(3),
       maxHeight: `calc(100vh - ${theme.spacing(6)}px)`,
       overflowY: 'auto',
-      alignSelf: 'flex-start',
+      alignSelf: 'start',
     },
   },
 }));