Skip to content

fix(theme): keep page tabs below the global header masthead - #4405

Open
ciiay wants to merge 3 commits into
redhat-developer:mainfrom
ciiay:fix/RHDHBUGS-3627-masthead-sidebar-offset
Open

ciiay wants to merge 3 commits into
redhat-developer:mainfrom
ciiay:fix/RHDHBUGS-3627-masthead-sidebar-offset

Conversation

@ciiay

@ciiay ciiay commented Aug 20, 2026

Copy link
Copy Markdown
Member

Description

NFS never reserved masthead height, so theme 100vh page-shell rules and the fixed sidebar sat under the global header and clipped HeaderTabs (RHDHBUGS-3627). This change publishes --rhdh-global-header-height from the header layout, subtracts it from theme viewport sizing, and offsets BackstageSidebar-drawer so tabs and sidebar content sit fully below the masthead.

The NFS demo app now matches OFS: branding stays in the header, not a duplicate sidebar logo.

Inspect Entity being covered by the masthead is a separate overlay/z-index issue and is tracked in RHDHBUGS-3603.

Fixed

  • RHDHBUGS-3627 — Top navigation items partially cut off by masthead/global header across all themes

Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)
rhdhbugs_3627.mp4

screen recording on app-next:

rhdhbugs_3627.mp4

@rhdh-gh-app

rhdh-gh-app Bot commented Aug 20, 2026

Copy link
Copy Markdown

Changed Packages

Package Name Package Path Changeset Bump Current Version
app workspaces/global-header/packages/app none v0.0.0
@red-hat-developer-hub/backstage-plugin-global-header workspaces/global-header/plugins/global-header patch v3.0.0
@red-hat-developer-hub/backstage-plugin-theme workspaces/theme/plugins/theme patch v1.2.1

@codecov

codecov Bot commented Aug 20, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 96.29630% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 63.60%. Comparing base (ef6ab36) to head (6295b02).
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4405   +/-   ##
=======================================
  Coverage   63.60%   63.60%           
=======================================
  Files        2685     2686    +1     
  Lines      107077   107104   +27     
  Branches    30010    30013    +3     
=======================================
+ Hits        68101    68127   +26     
- Misses      37165    37166    +1     
  Partials     1811     1811           
Flag Coverage Δ *Carryforward flag
adoption-insights 84.77% <ø> (ø) Carriedforward from ef6ab36
ai-integrations 82.63% <ø> (ø) Carriedforward from ef6ab36
app-defaults 54.82% <ø> (ø) Carriedforward from ef6ab36
augment 46.67% <ø> (ø) Carriedforward from ef6ab36
boost 84.97% <ø> (ø) Carriedforward from ef6ab36
bulk-import 73.12% <ø> (ø) Carriedforward from ef6ab36
cost-management 13.53% <ø> (ø) Carriedforward from ef6ab36
dcm 73.47% <ø> (ø) Carriedforward from ef6ab36
e2e-adoption-insights 60.00% <ø> (ø) Carriedforward from ef6ab36
e2e-extensions 62.31% <ø> (ø) Carriedforward from ef6ab36
e2e-global-header 51.82% <ø> (ø) Carriedforward from ef6ab36
e2e-homepage 61.11% <ø> (ø) Carriedforward from ef6ab36
e2e-intelligent-assistant 46.01% <ø> (ø) Carriedforward from ef6ab36
e2e-orchestrator 49.49% <ø> (ø) Carriedforward from ef6ab36
e2e-orchestrator-plugin 49.48% <ø> (ø) Carriedforward from ef6ab36
e2e-quickstart 55.21% <ø> (ø) Carriedforward from ef6ab36
e2e-scorecard 50.00% <ø> (ø) Carriedforward from ef6ab36
e2e-theme 16.36% <ø> (ø) Carriedforward from ef6ab36
extensions 58.30% <ø> (ø) Carriedforward from ef6ab36
global-floating-action-button 71.18% <ø> (ø) Carriedforward from ef6ab36
global-header 68.31% <96.15%> (+0.55%) ⬆️
homepage 55.16% <ø> (ø) Carriedforward from ef6ab36
install-dynamic-plugins 71.77% <ø> (ø) Carriedforward from ef6ab36
intelligent-assistant 78.04% <ø> (ø) Carriedforward from ef6ab36
konflux 91.98% <ø> (ø) Carriedforward from ef6ab36
lightspeed 69.02% <ø> (ø) Carriedforward from ef6ab36
mcp-integrations 84.46% <ø> (ø) Carriedforward from ef6ab36
orchestrator 77.69% <ø> (ø) Carriedforward from ef6ab36
quickstart 63.74% <ø> (ø) Carriedforward from ef6ab36
sandbox 79.56% <ø> (ø) Carriedforward from ef6ab36
scorecard 88.71% <ø> (ø) Carriedforward from ef6ab36
theme 87.96% <100.00%> (+0.02%) ⬆️
translations 5.12% <ø> (ø) Carriedforward from ef6ab36
x2a 78.44% <ø> (ø) Carriedforward from ef6ab36

*This pull request uses carry forward flags. Click here to find out more.


Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ef6ab36...6295b02. Read the comment docs.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ciiay

ciiay commented Aug 20, 2026

Copy link
Copy Markdown
Member Author

RHDHBUGS-3603 (Inspect Entity covered by the masthead) was split out of this PR. That overlay/z-index issue is independent of the page-shell HeaderTabs fix here.

@ciiay
ciiay force-pushed the fix/RHDHBUGS-3627-masthead-sidebar-offset branch 2 times, most recently from 851e820 to 2283811 Compare September 1, 2026 13:46
gustavolira pushed a commit to redhat-developer/rhdh-plugin-export-overlays that referenced this pull request Sep 1, 2026
…GS-3627

The suite's remaining failure is not a test problem. The global header is a
sticky MuiAppBar with z-index 1100 and the sidebar list starts at the top of the
viewport, so its first item — Catalog — renders underneath it. Playwright
retried the click for 10 seconds, 21 attempts, each reporting the element
visible, enabled, stable and scrolled into view, then blocked by
`<nav id="global-header">`. The screenshot confirms it: the first visible
sidebar entry is Create, and Catalog is nowhere on screen while the
accessibility tree has it as the first sidebar child. A user with a mouse cannot
open Catalog either.

That is RHDHBUGS-3627, which absorbed RHDHBUGS-3573 ("Global header overlaps top
content of sidebar navigation") — the exact symptom here. The video, screenshots
and an offline reproduction recipe are attached to that ticket. Its fix,
redhat-developer/rhdh-plugins#4405, is still open, so no image the e2e lanes
pull carries it yet.

`test.fail`, not `test.skip`, and that is the point of this commit rather than
an implementation detail. This PR exists because a skip went stale: it cited
RHIDP-15482, the ticket closed, nobody re-read the test, and the workspace sat
with no nightly coverage for months. Replacing one skip with another would
rebuild the same debt against a different ticket.

`fail` does not have that failure mode. Verified against the runner this repo
pins (@playwright/test 1.59.1) rather than assumed:

  - while the bug exists: the test reports ✘ but the run is green, and the
    other two tests keep running — so nightly coverage is restored for them.
  - once the bug is fixed: "Expected to fail, but passed." → the run goes red
    until someone deletes the marker.

CI becomes the reminder instead of a person. Applied unconditionally rather than
gated on E2E_NIGHTLY_MODE, because the overlap breaks the PR check too.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
@rohitratannagar

Copy link
Copy Markdown
Contributor

Tested it in rhdh-local, found some issues
main content in the rhdh themes is displaced towards the sidebar

Screen.Recording.2026-09-02.at.3.34.41.PM.mov

@ciiay

ciiay commented Sep 2, 2026

Copy link
Copy Markdown
Member Author

@rohitratannagar Thanks for testing this.

The recording looks like rhdh-local / OFS. This change is aimed at NFS (app-next) — OFS is being deprecated in the upcoming release, so the page-shell contract we need to preserve is NFS.

Could you re-test on NFS / app-next with this PR’s theme + global-header overlays, especially:

  • Catalog / Create / entity HeaderTabs vs the masthead
  • Home and Settings with RHDH Light (latest) and RHDH Dark (latest)
  • Whether the content well still sits flush to the sidebar the way it does on current NFS

The RHDH-theme well sitting against the sidebar is existing PF6 page-inset behavior (margin-left: 0 when the sidebar nav is present), not something this PR introduced for NFS. Changing that inset would shift NFS as well, which we don’t want to do in this ticket.

gustavolira added a commit to redhat-developer/rhdh-plugin-export-overlays that referenced this pull request Sep 10, 2026
…GS-3627

The suite's remaining failure is not a test problem. The global header is a
sticky MuiAppBar with z-index 1100 and the sidebar list starts at the top of the
viewport, so its first item — Catalog — renders underneath it. Playwright
retried the click for 10 seconds, 21 attempts, each reporting the element
visible, enabled, stable and scrolled into view, then blocked by
`<nav id="global-header">`. The screenshot confirms it: the first visible
sidebar entry is Create, and Catalog is nowhere on screen while the
accessibility tree has it as the first sidebar child. A user with a mouse cannot
open Catalog either.

That is RHDHBUGS-3627, which absorbed RHDHBUGS-3573 ("Global header overlaps top
content of sidebar navigation") — the exact symptom here. The video, screenshots
and an offline reproduction recipe are attached to that ticket. Its fix,
redhat-developer/rhdh-plugins#4405, is still open, so no image the e2e lanes
pull carries it yet.

`test.fail`, not `test.skip`, and that is the point of this commit rather than
an implementation detail. This PR exists because a skip went stale: it cited
RHIDP-15482, the ticket closed, nobody re-read the test, and the workspace sat
with no nightly coverage for months. Replacing one skip with another would
rebuild the same debt against a different ticket.

`fail` does not have that failure mode. Verified against the runner this repo
pins (@playwright/test 1.59.1) rather than assumed:

  - while the bug exists: the test reports ✘ but the run is green, and the
    other two tests keep running — so nightly coverage is restored for them.
  - once the bug is fixed: "Expected to fail, but passed." → the run goes red
    until someone deletes the marker.

CI becomes the reminder instead of a person. Applied unconditionally rather than
gated on E2E_NIGHTLY_MODE, because the overlap breaks the PR check too.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
gustavolira added a commit to redhat-developer/rhdh-plugin-export-overlays that referenced this pull request Sep 10, 2026
…GS-3627

The suite's remaining failure is not a test problem. The global header is a
sticky MuiAppBar with z-index 1100 and the sidebar list starts at the top of the
viewport, so its first item — Catalog — renders underneath it. Playwright
retried the click for 10 seconds, 21 attempts, each reporting the element
visible, enabled, stable and scrolled into view, then blocked by
`<nav id="global-header">`. The screenshot confirms it: the first visible
sidebar entry is Create, and Catalog is nowhere on screen while the
accessibility tree has it as the first sidebar child. A user with a mouse cannot
open Catalog either.

That is RHDHBUGS-3627, which absorbed RHDHBUGS-3573 ("Global header overlaps top
content of sidebar navigation") — the exact symptom here. The video, screenshots
and an offline reproduction recipe are attached to that ticket. Its fix,
redhat-developer/rhdh-plugins#4405, is still open, so no image the e2e lanes
pull carries it yet.

`test.fail`, not `test.skip`, and that is the point of this commit rather than
an implementation detail. This PR exists because a skip went stale: it cited
RHIDP-15482, the ticket closed, nobody re-read the test, and the workspace sat
with no nightly coverage for months. Replacing one skip with another would
rebuild the same debt against a different ticket.

`fail` does not have that failure mode. Verified against the runner this repo
pins (@playwright/test 1.59.1) rather than assumed:

  - while the bug exists: the test reports ✘ but the run is green, and the
    other two tests keep running — so nightly coverage is restored for them.
  - once the bug is fixed: "Expected to fail, but passed." → the run goes red
    until someone deletes the marker.

CI becomes the reminder instead of a person. Applied unconditionally rather than
gated on E2E_NIGHTLY_MODE, because the overlap breaks the PR check too.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
@github-actions

Copy link
Copy Markdown
Contributor

This PR has been automatically marked as stale because it has not had recent activity from the author. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution!

@github-actions github-actions Bot added stale and removed stale labels Sep 17, 2026
ciiay and others added 3 commits September 17, 2026 23:52
Cancelling the top inset under the global header still subtracted two insets from the content well, which left an extra gray band at the bottom of NFS pages.

Co-authored-by: Cursor <[email protected]>
@ciiay
ciiay force-pushed the fix/RHDHBUGS-3627-masthead-sidebar-offset branch from 96eac59 to 6295b02 Compare September 18, 2026 03:53
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants