From aff04d30f79da60821c173daf00c686a78efe162 Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Thu, 13 Nov 2025 22:18:44 -0500
Subject: [PATCH] fix(catalog): add margin for entity warning conent area in
 nfs catalog page

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/purple-pants-speak.md              |  5 ++
 .../src/alpha/DefaultEntityContentLayout.tsx  | 58 +++++++++----------
 2 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/purple-pants-speak.md

diff --git a/.changeset/purple-pants-speak.md b/.changeset/purple-pants-speak.md
new file mode 100644
index 0000000000..b46c4b991f
--- /dev/null
+++ b/.changeset/purple-pants-speak.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Fixed missing margins for entity warning content area on catalog entity page in NFS.
diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
index 77b84af275..7b5b6fbcbc 100644
--- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
+++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
@@ -15,7 +15,6 @@
  */
 
 import { Fragment } from 'react';
-import Grid from '@material-ui/core/Grid';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { EntityContentLayoutProps } from '@backstage/plugin-catalog-react/alpha';
 import { EntitySwitch } from '../components/EntitySwitch';
@@ -42,6 +41,15 @@ const useStyles = makeStyles<
     flexFlow: 'column nowrap',
     gap: theme.spacing(3),
   },
+  warningArea: {
+    display: 'grid',
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(3),
+    '&:empty': {
+      marginBottom: 0,
+      display: 'none',
+    },
+  },
   mainContent: {
     display: 'flex',
     flexFlow: 'column',
@@ -120,34 +128,6 @@ const useStyles = makeStyles<
   },
 }));
 
-const entityWarningContent = (
-  <>
-    <EntitySwitch>
-      <EntitySwitch.Case if={isOrphan}>
-        <Grid item xs={12}>
-          <EntityOrphanWarning />
-        </Grid>
-      </EntitySwitch.Case>
-    </EntitySwitch>
-
-    <EntitySwitch>
-      <EntitySwitch.Case if={hasRelationWarnings}>
-        <Grid item xs={12}>
-          <EntityRelationWarning />
-        </Grid>
-      </EntitySwitch.Case>
-    </EntitySwitch>
-
-    <EntitySwitch>
-      <EntitySwitch.Case if={hasCatalogProcessingErrors}>
-        <Grid item xs={12}>
-          <EntityProcessingErrorsPanel />
-        </Grid>
-      </EntitySwitch.Case>
-    </EntitySwitch>
-  </>
-);
-
 export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
   const { cards } = props;
 
@@ -165,7 +145,25 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
 
   return (
     <>
-      {entityWarningContent}
+      <div className={classes.warningArea}>
+        <EntitySwitch>
+          <EntitySwitch.Case if={isOrphan}>
+            <EntityOrphanWarning />
+          </EntitySwitch.Case>
+        </EntitySwitch>
+
+        <EntitySwitch>
+          <EntitySwitch.Case if={hasRelationWarnings}>
+            <EntityRelationWarning />
+          </EntitySwitch.Case>
+        </EntitySwitch>
+
+        <EntitySwitch>
+          <EntitySwitch.Case if={hasCatalogProcessingErrors}>
+            <EntityProcessingErrorsPanel />
+          </EntitySwitch.Case>
+        </EntitySwitch>
+      </div>
       <div className={classes.root}>
         {infoCards.length > 0 ? (
           <div className={classes.infoArea}>