From feaf3d1adec0cc8b41c1057f7c6186b2f03f0e31 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Tue, 31 Mar 2026 10:06:30 +0200 Subject: [PATCH] fix(ui): fix HeaderNav hover indicator covering tab text 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 --- .changeset/wicked-impalas-fry.md | 7 +++++++ packages/ui/src/components/Header/HeaderNav.module.css | 4 +++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/wicked-impalas-fry.md diff --git a/.changeset/wicked-impalas-fry.md b/.changeset/wicked-impalas-fry.md new file mode 100644 index 0000000000..35633b51e2 --- /dev/null +++ b/.changeset/wicked-impalas-fry.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed HeaderNav hover indicator covering tab text when theme uses opaque background colors. Also fixed an incorrect CSS variable reference (`--bui-font-family` → `--bui-font-regular`). + +**Affected components:** Header diff --git a/packages/ui/src/components/Header/HeaderNav.module.css b/packages/ui/src/components/Header/HeaderNav.module.css index 992e989a46..d2446fd8c0 100644 --- a/packages/ui/src/components/Header/HeaderNav.module.css +++ b/packages/ui/src/components/Header/HeaderNav.module.css @@ -50,7 +50,7 @@ .bui-HeaderNavItem, .bui-HeaderNavGroup { - font-family: var(--bui-font-family); + font-family: var(--bui-font-regular); font-size: var(--bui-font-size-3); font-weight: var(--bui-font-weight-regular); color: var(--bui-fg-secondary); @@ -61,6 +61,8 @@ padding-inline: var(--bui-space-2); text-decoration: none; cursor: pointer; + position: relative; + z-index: 2; border: none; background: none; outline: none;