Notification dropdown renders behind dashboard content

[NathanTarbert]

What happens

Open the notification bell on the dashboard. The dropdown renders, but page content draws on top of it — the dashboard's "View all tickets" gradient button overlaps the dropdown's own "View all tickets →" link, so the panel looks broken and the link underneath is hard to hit.

Why

app/(dashboard)/layout.tsx

• Line 46 — the <header> has backdrop-blur-xl. A backdrop-filter establishes a new stacking context, but the header itself has no z-index and no positioning.
• Line 82 — <main> has relative.

A positioned element paints above a non-positioned sibling. So <main> sits above the entire header, and the dropdown's z-50 in components/notifications/notification-bell.tsx:28 only competes inside the header's stacking context — it can never lift the panel above page content.

The z-50 looks like it should work, which is what makes this one confusing to chase.

Fix

Give the header its own stacking context above main. In app/(dashboard)/layout.tsx:46, add relative z-50 to the header's className:

className="relative z-50 flex h-16 shrink-0 items-center border-b ..."

Adding z-0 to <main> also works and may be tidier, but the header change is the smaller edit.

How to verify

1. pnpm dev, sign in, land on /dashboard
2. Click the notification bell in the top nav
3. The dropdown should render fully above the page content, with nothing overlapping "View all tickets →"
4. Check at a 375px viewport too — the top nav collapses there and the dropdown should still layer correctly

Notes for a first-time contributor

This is a one-line CSS change, but worth understanding the stacking-context rule behind it rather than adding a bigger z- value until it looks right — a larger number will not help while the header is trapped in a lower context.

Please run pnpm test and pnpm build before opening a PR. See AGENTS.md for the commit message and PR description standards this repo uses.