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,
|
buttonTestId,
|
||||||
}: SignedOutPanelProps) {
|
}: SignedOutPanelProps) {
|
||||||
return (
|
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">
|
<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>
|
<p className="text-sm text-slate-600">{message}</p>
|
||||||
<SignInButton
|
<SignInButton
|
||||||
|
|||||||
@@ -79,11 +79,22 @@ export function DashboardShell({ children }: { children: ReactNode }) {
|
|||||||
|
|
||||||
const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
|
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 (
|
return (
|
||||||
<div className="min-h-screen bg-app text-strong" data-sidebar={sidebarOpen ? "open" : "closed"}>
|
<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 py-3">
|
||||||
<div className="flex items-center px-4 md:px-6 md:w-[260px]">
|
<div className="flex items-center px-4 md:px-6 md:w-[260px]">
|
||||||
|
{isSignedIn ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
|
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" />}
|
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||||
</button>
|
</button>
|
||||||
|
) : null}
|
||||||
<BrandMark />
|
<BrandMark />
|
||||||
</div>
|
</div>
|
||||||
<SignedIn>
|
<SignedIn>
|
||||||
@@ -120,10 +132,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
|
|||||||
<div
|
<div
|
||||||
className="fixed inset-0 z-40 bg-black/30 md:hidden"
|
className="fixed inset-0 z-40 bg-black/30 md:hidden"
|
||||||
onClick={toggleSidebar}
|
onClick={toggleSidebar}
|
||||||
onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
|
aria-hidden="true"
|
||||||
role="button"
|
|
||||||
tabIndex={-1}
|
|
||||||
aria-label="Close navigation"
|
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user