Merge pull request #31759 from stephenglass/fix/catalog-warning-missing-margin

fix(catalog): add missing margin for entity warning content area in nfs entity page

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

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,16 @@ const useStyles = makeStyles<
     flexFlow: 'column nowrap',
     gap: theme.spacing(3),
   },
+  warningArea: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(3),
+    '&:empty': {
+      marginBottom: 0,
+      display: 'none',
+    },
+  },
   mainContent: {
     display: 'flex',
     flexFlow: 'column',
@@ -120,34 +129,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 +146,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}>