From c44d053aecaea31e9703565cd3ce21303221b591 Mon Sep 17 00:00:00 2001
From: Kody Jackson <kody.jackson@supabase.io>
Date: Wed, 30 Sep 2026 11:20:53 -0500
Subject: [PATCH] [KB] fix: update header positioning values for KB (#51096)

## Problem

z-index issue for the KB `Topics` dropdown on the main page, where it
would get hidden behind other elements on the screen.

## Solution

Update z-index values

## Preview links


[Preview](https://kb-git-fix-kb-header-positioning-supabase.vercel.app/kb)
[Prod](https://supabase.com/kb/)

## Additional context

**Before**


https://github.com/user-attachments/assets/61216776-166a-41f9-b1b0-7b2e734ff229

**After**


https://github.com/user-attachments/assets/0c15855d-fac5-4d55-b403-b091fb48e178

## Review instructions

Provide a clear numbered procedure that the PR reviewer can walk
through.

1. Open the live and preview links side-by-side.
2. Expand the `Topics` dropdown and see whether or not it's covered.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Updated header and navigation menu layering to improve visibility when
elements overlap.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/kb/src/components/Header.tsx | 2 +-
 apps/kb/src/components/Nav.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/kb/src/components/Header.tsx b/apps/kb/src/components/Header.tsx
index f1b9c746a54..14b7ce68bbe 100644
--- a/apps/kb/src/components/Header.tsx
+++ b/apps/kb/src/components/Header.tsx
@@ -7,7 +7,7 @@ import { ThemeToggle } from './ThemeToggle'
 // search, no user menu, no dashboard link — kb doesn't have any of that yet.
 function Header() {
   return (
-    <header className="backdrop-blur-sm backdrop-filter bg-default/75 border-b border-default w-full px-5 lg:pl-10 items-center flex h-(--header-height) gap-3">
+    <header className="relative z-50 backdrop-blur-sm backdrop-filter bg-default/75 border-b border-default w-full px-5 lg:pl-10 items-center flex h-(--header-height) gap-3">
       <div className="flex basis-full h-full items-center justify-center gap-2">
         <Logo />
         <Nav />
diff --git a/apps/kb/src/components/Nav.tsx b/apps/kb/src/components/Nav.tsx
index 16ff6977028..1f93936eefc 100644
--- a/apps/kb/src/components/Nav.tsx
+++ b/apps/kb/src/components/Nav.tsx
@@ -38,7 +38,7 @@ const triggerClass =
 // unconditional here; without it, an open menu pushes its siblings around
 // below the `md` breakpoint instead of overlaying them.
 const contentClass =
-  'absolute top-[calc(100%+4px)]! min-w-56 max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md duration-0!'
+  'absolute top-[calc(100%+4px)]! z-50 min-w-56 max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md duration-0!'
 const itemClass =
   'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground'