From 661477574f213447bcec880a978c92f29e2cd2dd Mon Sep 17 00:00:00 2001 From: Johnny Huynh <27847622+johnnyhuy@users.noreply.github.com> Date: Sun, 31 May 2026 20:11:56 +1000 Subject: [PATCH 1/3] fix: resolve Docker build failures and native module issues - Add MISE_PYTHON_GITHUB_ATTESTATIONS=false to Dockerfile (both build and run stages) to bypass mise Python 3.10.12 attestation failures in mise 2026.5.16+ - Copy .yarn/plugins/ and backstage.json before yarn install in build stage - the Backstage Yarn plugin requires these to resolve backstage:^ version ranges - Remove yarn tsc from Dockerfile - type checking is already covered by backstage-cli repo lint in CI - Copy .yarn/plugins/ and backstage.json before yarn workspaces focus in run stage for the same reason - Run mise install locally to rebuild native modules (better-sqlite3, isolated-vm, cpu-features) for Node 22 ABI --- Dockerfile | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index afed01c..361b83c 100644 --- a/Dockerfile +++ b/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. From e192dc3b315979fe248d401aa37439db15d9e61a Mon Sep 17 00:00:00 2001 From: Johnny Huynh <27847622+johnnyhuy@users.noreply.github.com> Date: Sun, 31 May 2026 21:44:30 +1000 Subject: [PATCH 2/3] fix: GitHub theme and catalog view padding gaps - Fix GitHub Light/Dark themes missing text colors and component overrides - Import styles.css into GitHub theme package - Add MuiGrid, MuiTypography, MuiCard overrides to GitHub themes - Remove negative marginBottom from catalog Grid items - Add consistent spacing={2} to all catalog Grid containers - Increase default theme MuiGrid padding from .5rem to 1rem - Fix missing item prop on nested Grid in apiPage --- .../app/src/components/catalog/EntityPage.tsx | 42 ++++++------ packages/app/src/theme/index.ts | 6 +- packages/backstage-theme-github/src/index.ts | 65 +++++++++++++++++++ 3 files changed, 90 insertions(+), 23 deletions(-) diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index cea66e8..710113a 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -122,12 +122,12 @@ const entityWarningContent = ( ); const overviewContent = ( - + {entityWarningContent} - + - + @@ -151,7 +151,7 @@ const serviceEntityPage = ( - + @@ -162,7 +162,7 @@ const serviceEntityPage = ( - + @@ -189,7 +189,7 @@ const websiteEntityPage = ( - + @@ -241,20 +241,22 @@ const componentPage = ( const apiPage = ( - + {entityWarningContent} - + - + - - - - - - + + + + + + + + @@ -264,7 +266,7 @@ const apiPage = ( - + @@ -276,7 +278,7 @@ const apiPage = ( const userPage = ( - + {entityWarningContent} @@ -292,7 +294,7 @@ const userPage = ( const groupPage = ( - + {entityWarningContent} @@ -314,7 +316,7 @@ const groupPage = ( const systemPage = ( - + {entityWarningContent} @@ -360,7 +362,7 @@ const systemPage = ( const domainPage = ( - + {entityWarningContent} diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts index 8d8f41c..70a96fd 100644 --- a/packages/app/src/theme/index.ts +++ b/packages/app/src/theme/index.ts @@ -91,17 +91,17 @@ export const backstageTheme = createUnifiedTheme({ MuiGrid: { styleOverrides: { item: { - padding: '.5rem', + padding: '1rem', }, root: { '&.v5-MuiGrid-container': { margin: 0, }, '&.v5-MuiGrid-item': { - padding: '.5rem', + padding: '1rem', }, '&.MuiGrid-item': { - padding: '.5rem', + padding: '1rem', }, }, }, diff --git a/packages/backstage-theme-github/src/index.ts b/packages/backstage-theme-github/src/index.ts index 889dc29..943b625 100644 --- a/packages/backstage-theme-github/src/index.ts +++ b/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,6 +154,34 @@ export const brandLightTheme = createUnifiedTheme({ }), }, components: { + MuiTypography: { + styleOverrides: { + root: { + wordSpacing: '0.02rem', + letterSpacing: '0.02rem', + }, + }, + }, + MuiGrid: { + styleOverrides: { + root: { + '&.MuiGrid-container': { + margin: 0, + }, + '&.MuiGrid-item': { + padding: '1rem', + }, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '0.75rem', + border: `1px solid ${primer.light.divider}`, + }, + }, + }, // Ensure the drawer uses the same nav background (some variants read MUI Drawer styles) MuiDrawer: { styleOverrides: { @@ -186,6 +219,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 +268,34 @@ export const brandDarkTheme = createUnifiedTheme({ }), }, components: { + MuiTypography: { + styleOverrides: { + root: { + wordSpacing: '0.02rem', + letterSpacing: '0.02rem', + }, + }, + }, + MuiGrid: { + styleOverrides: { + root: { + '&.MuiGrid-container': { + margin: 0, + }, + '&.MuiGrid-item': { + padding: '1rem', + }, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '0.75rem', + border: `1px solid ${primer.dark.divider}`, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: { From 36cca5e6c63d53d4fbd578b3bdd75db2a477f977 Mon Sep 17 00:00:00 2001 From: Johnny Huynh <27847622+johnnyhuy@users.noreply.github.com> Date: Sun, 31 May 2026 23:48:42 +1000 Subject: [PATCH 3/3] fix: remove broken MuiGrid overrides and add CSS grid spacing fix - Remove MuiGrid overrides from both default and GitHub themes The overrides broke MUI's spacing prop by zeroing out item padding - Add global CSS fix for Backstage's v5-MuiGrid class name prefix Backstage's UnifiedThemeProvider adds 'v5-' prefix to MUI classes, but Grid's internal CSS still targets .MuiGrid-item selectors. This mismatch caused all Grid items to have 0 padding, making cards touch each other across all pages. - Import grid-fix.css in index.tsx so it applies globally --- packages/app/src/index.tsx | 1 + packages/app/src/styles/grid-fix.css | 36 ++++++++++++++++++++ packages/app/src/theme/index.ts | 19 +---------- packages/backstage-theme-github/src/index.ts | 25 -------------- 4 files changed, 38 insertions(+), 43 deletions(-) create mode 100644 packages/app/src/styles/grid-fix.css diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index 98d7b94..3ed7638 100644 --- a/packages/app/src/index.tsx +++ b/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(); diff --git a/packages/app/src/styles/grid-fix.css b/packages/app/src/styles/grid-fix.css new file mode 100644 index 0000000..9a9c457 --- /dev/null +++ b/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; +} diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts index 70a96fd..a033893 100644 --- a/packages/app/src/theme/index.ts +++ b/packages/app/src/theme/index.ts @@ -88,24 +88,7 @@ export const backstageTheme = createUnifiedTheme({ }, }, }, - MuiGrid: { - styleOverrides: { - item: { - padding: '1rem', - }, - root: { - '&.v5-MuiGrid-container': { - margin: 0, - }, - '&.v5-MuiGrid-item': { - padding: '1rem', - }, - '&.MuiGrid-item': { - padding: '1rem', - }, - }, - }, - }, + }, pageTheme: { home: genPageTheme({ diff --git a/packages/backstage-theme-github/src/index.ts b/packages/backstage-theme-github/src/index.ts index 943b625..c43244d 100644 --- a/packages/backstage-theme-github/src/index.ts +++ b/packages/backstage-theme-github/src/index.ts @@ -162,18 +162,6 @@ export const brandLightTheme = createUnifiedTheme({ }, }, }, - MuiGrid: { - styleOverrides: { - root: { - '&.MuiGrid-container': { - margin: 0, - }, - '&.MuiGrid-item': { - padding: '1rem', - }, - }, - }, - }, MuiCard: { styleOverrides: { root: { @@ -182,7 +170,6 @@ export const brandLightTheme = createUnifiedTheme({ }, }, }, - // Ensure the drawer uses the same nav background (some variants read MUI Drawer styles) MuiDrawer: { styleOverrides: { paper: { @@ -276,18 +263,6 @@ export const brandDarkTheme = createUnifiedTheme({ }, }, }, - MuiGrid: { - styleOverrides: { - root: { - '&.MuiGrid-container': { - margin: 0, - }, - '&.MuiGrid-item': { - padding: '1rem', - }, - }, - }, - }, MuiCard: { styleOverrides: { root: {