Skip to content

fix(ui): fix Header nav hover indicator covering tab text#33696

Merged
Naycon merged 1 commit intomasterfrom
fix/headernav-hover-indicator-z-index
Mar 31, 2026
Merged

fix(ui): fix Header nav hover indicator covering tab text#33696
Naycon merged 1 commit intomasterfrom
fix/headernav-hover-indicator-z-index

Conversation

@Naycon
Copy link
Copy Markdown
Collaborator

@Naycon Naycon commented Mar 31, 2026

Hey, I just made a Pull Request!

The HeaderNav hover indicator uses position: absolute and paints
on top of tab text. This works with the default BUI theme because
--bui-bg-neutral-2 is semi-transparent, but any theme using an
opaque value for that token fully obscures the tab labels on hover.

This adds position: relative and z-index: 2 to nav items (matching
the Tabs component pattern) so they paint above the indicators.

Also fixes a reference to the non-existent --bui-font-family CSS
variable — the correct token is --bui-font-regular.

✔️ Checklist

  • A changeset describing the change and affected packages.
  • Added or updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)
  • All your commits have a Signed-off-by line in the message.

@Naycon
fix(ui): fix HeaderNav hover indicator covering tab text
dd48780 
Add `position: relative` and `z-index: 2` to nav items so they
paint above the hover/active indicator, matching the Tabs pattern.
This fixes themes with opaque `--bui-bg-neutral-2` values obscuring
tab labels on hover.

Also fix `--bui-font-family` (non-existent) to `--bui-font-regular`.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
Copilot AI review requested due to automatic review settings March 31, 2026 08:09
@Naycon Naycon requested a review from a team as a code owner March 31, 2026 08:09
@backstage-goalie
Copy link
Copy Markdown
Contributor

backstage-goalie Bot commented Mar 31, 2026

Changed Packages

Package Name Package Path Changeset Bump Current Version
@backstage/ui packages/ui patch v0.14.0-next.0

@backstage-goalie backstage-goalie Bot added size:small Small pull requests receive a slightly higher priority for reviews. waiting-for:review The PR needs a review and will be visible in the review queue unless already assigned an owner. labels Mar 31, 2026
Rugvip
Rugvip approved these changes Mar 31, 2026
View reviewed changes
Comment thread packages/ui/src/components/Header/HeaderNav.module.css
text-decoration: none;
cursor: pointer;
position: relative;
z-index: 2;
Copy link
Copy Markdown
Member

@Rugvip Rugvip Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely needed? 🤔, thinking if we could reorder elements or smth instead

Copy link
Copy Markdown
Collaborator Author

@Naycon Naycon Mar 31, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The indicator is absolute positioned, so reordering won't be enough. It actually works as-is out of the box in Backstage, but some themes might set a non-transparent neutral color, which would cause issues. This fix was/is actually already in the Tabs component, I removed it when I created this one because I thought it would be enough without. :)

@backstage-goalie backstage-goalie Bot added waiting-for:merge The PR has been approved and is awaiting merge. and removed waiting-for:review The PR needs a review and will be visible in the review queue unless already assigned an owner. labels Mar 31, 2026
Copilot AI reviewed Mar 31, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes HeaderNav hover/active indicator layering so the (absolutely positioned) hover background no longer paints over tab text when themes use an opaque --bui-bg-neutral-2. Also corrects the HeaderNav font token to use the existing --bui-font-regular variable.

Changes:

  • Add position: relative + z-index: 2 to Header nav items/groups so labels render above the hover indicator (matching the Tabs pattern).
  • Replace non-existent --bui-font-family token usage with --bui-font-regular.
  • Add a patch changeset documenting the fix for @backstage/ui.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
packages/ui/src/components/Header/HeaderNav.module.css Adjusts stacking order so tab text renders above hover indicator; fixes font token reference.
.changeset/wicked-impalas-fry.md Adds a patch changeset describing the Header hover indicator fix and token correction.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

🎨 Visual Testing with Chromatic

@Naycon Naycon merged commit feaf3d1 into master Mar 31, 2026
39 checks passed
@Naycon Naycon deleted the fix/headernav-hover-indicator-z-index branch March 31, 2026 11:43
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.50.0 release, scheduled for Tue, 14 Apr 2026.

@github-actions github-actions Bot mentioned this pull request Apr 1, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@Rugvip Rugvip Rugvip approved these changes

Assignees

No one assigned

Labels

size:small Small pull requests receive a slightly higher priority for reviews. waiting-for:merge The PR has been approved and is awaiting merge.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Naycon @Rugvip