From f0ab3e315baf2416cafd4d757bfb79ba15202a1c Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 20:19:39 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20address=20Copilot=20review=20=E2=80=94?=
 =?UTF-8?q?=20z-index,=20Escape=20key,=20signed-out=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Raise header to z-50 so toggle button stays clickable above backdrop
- Use document keydown listener for Escape instead of onKeyDown on backdrop
- Only render hamburger toggle when signed in
- Make SignedOutPanel col-span responsive (col-span-1 on mobile)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/auth/SignedOutPanel.tsx    |  2 +-
 .../components/templates/DashboardShell.tsx   | 35 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/auth/SignedOutPanel.tsx b/frontend/src/components/auth/SignedOutPanel.tsx
index e1c92264..f3912cfc 100644
--- a/frontend/src/components/auth/SignedOutPanel.tsx
+++ b/frontend/src/components/auth/SignedOutPanel.tsx
@@ -20,7 +20,7 @@ export function SignedOutPanel({
   buttonTestId,
 }: SignedOutPanelProps) {
   return (
-    <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+    <div className="col-span-1 md:col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
       <div className="rounded-xl border border-slate-200 bg-white px-4 py-4 md:px-8 md:py-6 shadow-sm">
         <p className="text-sm text-slate-600">{message}</p>
         <SignInButton
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index 107dfdc6..a9a3f4ce 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -79,19 +79,31 @@ export function DashboardShell({ children }: { children: ReactNode }) {
 
   const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
 
+  // Dismiss sidebar on Escape
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setSidebarOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [sidebarOpen]);
+
   return (
     <div className="min-h-screen bg-app text-strong" data-sidebar={sidebarOpen ? "open" : "closed"}>
-      <header className="sticky top-0 z-40 border-b border-slate-200 bg-white shadow-sm">
+      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white shadow-sm">
         <div className="flex items-center py-3">
           <div className="flex items-center px-4 md:px-6 md:w-[260px]">
-            <button
-              type="button"
-              className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
-              onClick={toggleSidebar}
-              aria-label="Toggle navigation"
-            >
-              {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </button>
+            {isSignedIn ? (
+              <button
+                type="button"
+                className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
+                onClick={toggleSidebar}
+                aria-label="Toggle navigation"
+              >
+                {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+              </button>
+            ) : null}
             <BrandMark />
           </div>
           <SignedIn>
@@ -120,10 +132,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
         <div
           className="fixed inset-0 z-40 bg-black/30 md:hidden"
           onClick={toggleSidebar}
-          onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
-          role="button"
-          tabIndex={-1}
-          aria-label="Close navigation"
+          aria-hidden="true"
         />
       ) : null}