Skip to content

fix(theme): fill NFS catalog entity tab content well #4418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ciiay wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(theme): fill NFS catalog entity tab content well #4418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions workspaces/theme/.changeset/bui-main-flex.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@red-hat-developer-hub/backstage-plugin-theme': patch
---

Make NFS BUI catalog entity `<main>` a flex column so Topology and Scorecard fill the content well instead of leaving a gap below short tab content (RHDHBUGS-3543).
18 changes: 18 additions & 0 deletions workspaces/theme/plugins/theme/src/utils/createComponents.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, unknown>
| undefined;
const desktop = root?.['@media (min-width: 600px)'] as
| Record<string, unknown>
| 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
Expand Down
12 changes: 12 additions & 0 deletions workspaces/theme/plugins/theme/src/utils/createComponents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <main>. 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>.
'& > 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 <main>. 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.
Expand Down
Loading