fix: address Copilot review — z-index, Escape key, signed-out UX
- 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>
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -79,11 +79,22 @@ 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]">
|
||||
{isSignedIn ? (
|
||||
<button
|
||||
type="button"
|
||||
className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
|
||||
@@ -92,6 +103,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
|
||||
>
|
||||
{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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user