[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 -->
This commit is contained in:
Kody Jackson authored and GitHub committed 2026-09-30 11:20:53 -05:00
1 parent 9946747579
commit c44d053aec
2 files changed
+2 -2

No files matched your search

+1 -1
View File
@@ -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 />
+1 -1
View File
@@ -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'