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 <johanopersson@gmail.com>

.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

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;