From d1dd2e65351115093f1cdd0711495e598c324933 Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 00:54:51 -0800
Subject: [PATCH] Full-screen overlay with drawer-local close button and theme
 toggle

- Overlay covers entire viewport (inset-0 z-40) including header
- Drawer at z-50 spans full height with its own header row
- Duplicate theme toggle + close (X) button inside drawer
- Docs sidebar/FAB bumped to z-50 to stay above overlay
---
 web/app/components/mobile-drawer.tsx |  2 +-
 web/app/components/site-header.tsx   | 29 +++++++++++++++++++++++++---
 web/app/docs/docs-nav.tsx            |  4 ++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/app/components/mobile-drawer.tsx b/web/app/components/mobile-drawer.tsx
index 9392b786..32769e46 100644
--- a/web/app/components/mobile-drawer.tsx
+++ b/web/app/components/mobile-drawer.tsx
@@ -70,7 +70,7 @@ export function MobileDrawerOverlay({ open, onClose }: { open: boolean; onClose:
   if (!open) return null;
   return (
     <div
-      className="fixed top-12 left-0 right-0 bottom-0 z-30 bg-black/50 md:hidden"
+      className="fixed inset-0 z-40 bg-black/50 md:hidden"
       aria-hidden="true"
       onClick={onClose}
     />
diff --git a/web/app/components/site-header.tsx b/web/app/components/site-header.tsx
index 6a6b24f7..7bd6c80e 100644
--- a/web/app/components/site-header.tsx
+++ b/web/app/components/site-header.tsx
@@ -74,12 +74,35 @@ export function SiteHeader({
         ref={drawerRef}
         role="navigation"
         aria-label="Main navigation"
-        className={`fixed top-12 right-0 z-40 w-56 bg-background border-l border-border py-4 px-4 overflow-y-auto transition-transform md:hidden ${
+        className={`fixed inset-y-0 right-0 z-50 w-56 bg-background border-l border-border overflow-y-auto transition-transform md:hidden ${
           open ? "translate-x-0" : "translate-x-full invisible"
         }`}
-        style={{ height: "calc(100dvh - 3rem)" }}
       >
-        <div className="flex flex-col gap-3 text-sm text-muted">
+        {/* Drawer header — mirrors the site header row */}
+        <div className="flex items-center justify-end gap-1 px-4 h-12">
+          <ThemeToggle />
+          <button
+            onClick={close}
+            className="w-8 h-8 flex items-center justify-center text-muted hover:text-foreground transition-colors"
+            aria-label="Close menu"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-3 text-sm text-muted px-4 pb-4">
           <Link
             href="/docs/getting-started"
             onClick={close}
diff --git a/web/app/docs/docs-nav.tsx b/web/app/docs/docs-nav.tsx
index 6c97299e..ce1b225f 100644
--- a/web/app/docs/docs-nav.tsx
+++ b/web/app/docs/docs-nav.tsx
@@ -18,7 +18,7 @@ export function DocsNav({ children }: { children: React.ReactNode }) {
         onClick={toggle}
         aria-expanded={open}
         aria-controls="docs-sidebar"
-        className="fixed bottom-4 right-4 z-40 md:hidden w-10 h-10 rounded-full bg-foreground text-background flex items-center justify-center shadow-lg"
+        className="fixed bottom-4 right-4 z-50 md:hidden w-10 h-10 rounded-full bg-foreground text-background flex items-center justify-center shadow-lg"
         aria-label={open ? "Close navigation" : "Open navigation"}
       >
         <svg
@@ -54,7 +54,7 @@ export function DocsNav({ children }: { children: React.ReactNode }) {
         role="navigation"
         aria-label="Documentation"
         style={{ height: "calc(100dvh - 3rem)" }}
-        className={`fixed top-12 left-0 z-40 w-56 bg-background py-4 pr-4 overflow-y-auto transition-transform md:sticky md:top-12 md:z-20 md:shrink-0 md:translate-x-0 ${
+        className={`fixed top-12 left-0 z-50 w-56 bg-background py-4 pr-4 overflow-y-auto transition-transform md:sticky md:top-12 md:z-20 md:shrink-0 md:translate-x-0 ${
           open ? "translate-x-0" : "-translate-x-full"
         }`}
       >