From 0876a7a86bb72825628e8536e74437dfee0ebae6 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 03:33:26 +0000 Subject: [PATCH] Fix mobile drawer backdrop blocking taps when closed On the mobile-portrait layout the nav backdrop was rendered with an author `display: block` rule inside the (max-width: 820px) media query. That rule beats the user-agent `[hidden] { display: none }` rule, so the `hidden` attribute the Shell sets when the drawer is closed had no effect: the backdrop stayed pinned over the page as a fixed z-index:50 overlay, greying the dashboard out and swallowing every tap while still letting the page scroll. Scope the display rule to `.nav-backdrop:not([hidden])` so the closed state honours the `hidden` attribute and the backdrop only covers the page while the drawer is actually open. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_013BYQKtb2HVzLa36JDoytki --- web/src/styles/base.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/src/styles/base.css b/web/src/styles/base.css index 062ad4c..21ece6f 100644 --- a/web/src/styles/base.css +++ b/web/src/styles/base.css @@ -365,7 +365,12 @@ code { height: 18px; } - .nav-backdrop { + /* Scope to :not([hidden]) so the drawer-closed state (the JSX sets the + `hidden` attribute) actually disappears. An author `display: block` rule + otherwise beats the UA `[hidden] { display: none }` rule, which would pin + the backdrop over the page permanently — greying it out and eating every + tap while the drawer is closed. */ + .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0;