fix: GitHub theme and catalog view padding gaps

Dockerfile

@@ -29,6 +29,7 @@ WORKDIR /app
 ENV PYTHONUNBUFFERED=1
 ENV MISE_YES=1
 ENV MISE_HTTP_TIMEOUT=120
+ENV MISE_PYTHON_GITHUB_ATTESTATIONS=false
 ENV PATH=/root/.local/bin:/root/.local/share/mise/shims:$PATH
 RUN curl -fsSL https://mise.run | sh
 COPY mise.toml ./
@@ -47,14 +48,14 @@ COPY packages/app/package.json ./packages/app/package.json
 COPY packages/backstage-theme-github/package.json ./packages/backstage-theme-github/package.json
 COPY plugins/ plugins/
 COPY .yarnrc.yml ./
+COPY .yarn/plugins/ .yarn/plugins/
+COPY backstage.json ./
 RUN yarn install --immutable
 
 COPY tsconfig.json ./
 COPY lerna.json ./
-COPY backstage.json ./
 COPY packages/ packages/
 COPY plugins/ plugins/
-RUN yarn tsc
 
 COPY app-config.yaml ./
 RUN yarn build:backend
@@ -91,6 +92,7 @@ WORKDIR /app
 ENV PYTHONUNBUFFERED=1
 ENV MISE_YES=1
 ENV MISE_HTTP_TIMEOUT=120
+ENV MISE_PYTHON_GITHUB_ATTESTATIONS=false
 ENV PATH=/root/.local/bin:/root/.local/share/mise/shims:$PATH
 RUN curl -fsSL https://mise.run | sh
 COPY mise.toml ./
@@ -115,6 +117,8 @@ COPY --from=build /app/packages/backend/dist/skeleton.tar.gz ./
 RUN tar xzf skeleton.tar.gz && rm skeleton.tar.gz
 
 COPY .yarnrc.yml ./
+COPY .yarn/plugins/ .yarn/plugins/
+COPY backstage.json ./
 RUN yarn workspaces focus --all --production && rm -rf "$(yarn cache clean)"
 
 # Then copy the rest of the backend bundle, along with any other files we might want.

packages/app/src/components/catalog/EntityPage.tsx

@@ -122,12 +122,12 @@ const entityWarningContent = (
 );
 
 const overviewContent = (
-  <Grid container alignItems="stretch">
+  <Grid container alignItems="stretch" spacing={2}>
     {entityWarningContent}
-    <Grid item md={6} marginBottom={-1}>
+    <Grid item md={6}>
       <EntityAboutCard />
     </Grid>
-    <Grid item md={6} marginBottom={-1}>
+    <Grid item md={6}>
       <EntityCatalogGraphCard height={400} />
     </Grid>
 
@@ -151,7 +151,7 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/api" title="API">
-      <Grid container alignItems="stretch">
+      <Grid container alignItems="stretch" spacing={2}>
         <Grid item md={6}>
           <EntityProvidedApisCard />
         </Grid>
@@ -162,7 +162,7 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
-      <Grid container alignItems="stretch">
+      <Grid container alignItems="stretch" spacing={2}>
         <Grid item md={6}>
           <EntityDependsOnComponentsCard />
         </Grid>
@@ -189,7 +189,7 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
-      <Grid container alignItems="stretch">
+      <Grid container alignItems="stretch" spacing={2}>
         <Grid item md={6}>
           <EntityDependsOnComponentsCard />
         </Grid>
@@ -241,20 +241,22 @@ const componentPage = (
 const apiPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container>
+      <Grid container spacing={2}>
         {entityWarningContent}
-        <Grid item md={6} marginBottom={-1}>
+        <Grid item md={6}>
           <EntityAboutCard />
         </Grid>
-        <Grid item md={6} marginBottom={-1}>
+        <Grid item md={6}>
           <EntityCatalogGraphCard height={400} />
         </Grid>
-        <Grid md={8}>
-          <Grid item md={12}>
-            <EntityProvidingComponentsCard />
-          </Grid>
-          <Grid item md={12}>
-            <EntityConsumingComponentsCard />
+        <Grid item md={8}>
+          <Grid container spacing={2}>
+            <Grid item md={12}>
+              <EntityProvidingComponentsCard />
+            </Grid>
+            <Grid item md={12}>
+              <EntityConsumingComponentsCard />
+            </Grid>
           </Grid>
         </Grid>
         <Grid item md={4}>
@@ -264,7 +266,7 @@ const apiPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/definition" title="Definition">
-      <Grid container>
+      <Grid container spacing={2}>
         <Grid item xs>
           <EntityApiDefinitionCard />
         </Grid>
@@ -276,7 +278,7 @@ const apiPage = (
 const userPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container>
+      <Grid container spacing={2}>
         {entityWarningContent}
         <Grid item md={6}>
           <EntityUserProfileCard />
@@ -292,7 +294,7 @@ const userPage = (
 const groupPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container>
+      <Grid container spacing={2}>
         {entityWarningContent}
         <Grid item md={6}>
           <EntityGroupProfileCard />
@@ -314,7 +316,7 @@ const groupPage = (
 const systemPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container alignItems="stretch">
+      <Grid container alignItems="stretch" spacing={2}>
         {entityWarningContent}
         <Grid item md={6}>
           <EntityAboutCard />
@@ -360,7 +362,7 @@ const systemPage = (
 const domainPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container alignItems="stretch">
+      <Grid container alignItems="stretch" spacing={2}>
         {entityWarningContent}
         <Grid item md={6}>
           <EntityAboutCard />

packages/app/src/index.tsx

@@ -3,5 +3,6 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import '@backstage/ui/css/styles.css';
 import '@internal/backstage-theme-github/src/styles.css';
+import './styles/grid-fix.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

packages/app/src/styles/grid-fix.css

@@ -0,0 +1,36 @@
+/*
+  Fix for MUI Grid spacing when Backstage's UnifiedThemeProvider adds
+  a 'v5-' prefix to MUI class names. The Grid's internal CSS uses
+  .MuiGrid-item selectors but actual elements have .v5-MuiGrid-item.
+  This restores proper gaps between Grid items.
+*/
+
+/* spacing={1} → 8px */
+[class*="MuiGrid-container"][class*="spacing-xs-1"] > [class*="-MuiGrid-item"] {
+  padding-top: 8px;
+  padding-left: 8px;
+}
+
+/* spacing={2} → 16px */
+[class*="MuiGrid-container"][class*="spacing-xs-2"] > [class*="-MuiGrid-item"] {
+  padding-top: 16px;
+  padding-left: 16px;
+}
+
+/* spacing={3} → 24px */
+[class*="MuiGrid-container"][class*="spacing-xs-3"] > [class*="-MuiGrid-item"] {
+  padding-top: 24px;
+  padding-left: 24px;
+}
+
+/* spacing={4} → 32px */
+[class*="MuiGrid-container"][class*="spacing-xs-4"] > [class*="-MuiGrid-item"] {
+  padding-top: 32px;
+  padding-left: 32px;
+}
+
+/* spacing={5} → 40px */
+[class*="MuiGrid-container"][class*="spacing-xs-5"] > [class*="-MuiGrid-item"] {
+  padding-top: 40px;
+  padding-left: 40px;
+}

packages/app/src/theme/index.ts

@@ -88,24 +88,7 @@ export const backstageTheme = createUnifiedTheme({
         },
       },
     },
-    MuiGrid: {
-      styleOverrides: {
-        item: {
-          padding: '.5rem',
-        },
-        root: {
-          '&.v5-MuiGrid-container': {
-            margin: 0,
-          },
-          '&.v5-MuiGrid-item': {
-            padding: '.5rem',
-          },
-          '&.MuiGrid-item': {
-            padding: '.5rem',
-          },
-        },
-      },
-    },
+
   },
   pageTheme: {
     home: genPageTheme({

packages/backstage-theme-github/src/index.ts

@@ -4,6 +4,7 @@ import {
   palettes,
   shapes,
 } from '@backstage/theme';
+import './styles.css';
 
 // GitHub Primer-inspired font stack
 const BRAND_FONT_FAMILY =
@@ -104,6 +105,10 @@ export const brandLightTheme = createUnifiedTheme({
     warning: { main: primer.light.warning },
     error: { main: primer.light.error },
     info: { main: primer.light.info },
+    text: {
+      primary: primer.light.textPrimary,
+      secondary: primer.light.textSecondary,
+    },
     background: {
       ...palettes.light.background,
       default: primer.light.bgDefault,
@@ -149,7 +154,22 @@ export const brandLightTheme = createUnifiedTheme({
     }),
   },
   components: {
-    // Ensure the drawer uses the same nav background (some variants read MUI Drawer styles)
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          wordSpacing: '0.02rem',
+          letterSpacing: '0.02rem',
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '0.75rem',
+          border: `1px solid ${primer.light.divider}`,
+        },
+      },
+    },
     MuiDrawer: {
       styleOverrides: {
         paper: {
@@ -186,6 +206,10 @@ export const brandDarkTheme = createUnifiedTheme({
     warning: { main: primer.dark.warning },
     error: { main: primer.dark.error },
     info: { main: primer.dark.info },
+    text: {
+      primary: primer.dark.textPrimary,
+      secondary: primer.dark.textSecondary,
+    },
     background: {
       ...palettes.dark.background,
       default: primer.dark.bgDefault,
@@ -231,6 +255,22 @@ export const brandDarkTheme = createUnifiedTheme({
     }),
   },
   components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          wordSpacing: '0.02rem',
+          letterSpacing: '0.02rem',
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '0.75rem',
+          border: `1px solid ${primer.dark.divider}`,
+        },
+      },
+    },
     MuiDrawer: {
       styleOverrides: {
         paper: {