Fix mobile drawer backdrop blocking taps when closed - #82
Conversation
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013BYQKtb2HVzLa36JDoytki
|
📝 WalkthroughWalkthroughFixed the mobile drawer backdrop remaining visible and intercepting taps when closed by scoping the display rule to Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Suggested Labels
Risk AssessmentScore: 0/100 — 🟢 Low No elevated risk signals detected. 🚥 Pre-merge checks | ✅ 5 | ❌ 0✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in your ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Generate docstrings (beta)
🧹 Simplify (beta)
🪄 Autofix unresolved comments (beta)
Comment |
![diffsentry[bot]](https://avatars.githubusercontent.com/in/3360270?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Correct, minimal CSS fix for the mobile drawer backdrop. Scoping display: block (and the rest of the overlay rules) to .nav-backdrop:not([hidden]) restores the UA [hidden] { display: none } behavior so the closed drawer no longer traps taps. The accompanying comment documents the specificity trap clearly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: .diffsentry.yaml
Review profile: ASSERTIVE
Run ID: d877083f-f9f0-42ab-9ff2-eb132f49be45
📥 Commits
Reviewing files at 0876a7a (base SHA unavailable).
📒 Files selected for processing (1)
web/src/styles/base.css
📌 Status — last updated
|
| Risk score | 0/100 (Low) ▁ |
| Unresolved threads | 0 |
| Failing checks | 0 |
| Pending checks | 1 |
| Files reviewed | 1 |
| Updated | 2026-07-25 03:36Z |
Live-updated by DiffSentry on every push. Use @diffsentry ship for a verdict, @diffsentry timeline for full history.
2 participants
On the mobile-portrait layout the nav backdrop was rendered with an
author
display: blockrule inside the (max-width: 820px) media query.That rule beats the user-agent
[hidden] { display: none }rule, so thehiddenattribute 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 closedstate honours the
hiddenattribute and the backdrop only covers thepage while the drawer is actually open.
Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_013BYQKtb2HVzLa36JDoytki
Summary
Fixed the mobile drawer backdrop remaining visible and intercepting taps when closed by scoping the display rule to
.nav-backdrop:not([hidden]).Changes
web/src/styles/base.css