diff --git a/workspaces/theme/.changeset/bui-main-flex.md b/workspaces/theme/.changeset/bui-main-flex.md new file mode 100644 index 00000000000..1c04297e443 --- /dev/null +++ b/workspaces/theme/.changeset/bui-main-flex.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-theme': patch +--- + +Make NFS BUI catalog entity `
` a flex column so Topology and Scorecard fill the content well instead of leaving a gap below short tab content (RHDHBUGS-3543). diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts index 0b9f98de669..3ed80427159 100644 --- a/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts +++ b/workspaces/theme/plugins/theme/src/utils/createComponents.test.ts @@ -117,6 +117,24 @@ describe('createComponents', () => { ); }); + it('makes NFS BUI main a flex column so nested Containers can grow', () => { + const actual = createComponents({ palette: customDarkTheme() }); + const root = actual.BackstageSidebarPage?.styleOverrides?.root as + | Record + | undefined; + const desktop = root?.['@media (min-width: 600px)'] as + | Record + | undefined; + expect(desktop?.['& > main:not([data-backstage-core-page])']).toEqual( + expect.objectContaining({ + display: 'flex', + flexDirection: 'column', + flex: 1, + minHeight: 0, + }), + ); + }); + it('paints BUI content Containers with mainSectionBackgroundColor', () => { const actual = createComponents({ palette: customDarkTheme() }); const root = actual.BackstageSidebarPage?.styleOverrides?.root as diff --git a/workspaces/theme/plugins/theme/src/utils/createComponents.ts b/workspaces/theme/plugins/theme/src/utils/createComponents.ts index 6f313f41d46..56c673adbb3 100644 --- a/workspaces/theme/plugins/theme/src/utils/createComponents.ts +++ b/workspaces/theme/plugins/theme/src/utils/createComponents.ts @@ -789,6 +789,18 @@ export const createComponents = (themeConfig: ThemeConfig): Components => { // Prevent overflow in the main container due to the margin maxHeight: `calc(100vh - 2 * ${general.pageInset})`, }, + // NFS BUI entity pages wrap PluginHeader + tabs + Container in a + // classless
. BUI Container is flex: 1 1 0% but that only + // grows when main is a flex column — otherwise Topology / Scorecard + // stay content-height inside a tall well (RHDHBUGS-3543). Do not + // override Backstage Page, which uses display:grid on
. + '& > main:not([data-backstage-core-page])': { + display: 'flex', + flexDirection: 'column', + flex: 1, + minHeight: 0, + maxHeight: `calc(100% - 2 * ${general.pageInset})`, + }, // NFS / BUI pages use Container instead of
. Match the content // well color (same token as BackstageContent) and rely on flex: 1 // from BUI rather than 100vh so PluginHeader siblings are not overflowed.