Repository navigation
fix(ui): unjam the mobile nav toggle - #50
Merged
Merged
Conversation
Three defects combined into the 'jamming' hamburger on phones: - The actions row (theme, sign in, sign up, menu) plus the logo and two 16px grid gaps overflow a 360-375px viewport by ~30px, pushing the hamburger half off-screen into the OS edge-swipe zone. Below 767px the grid gaps tighten to 8px and the GitHub icon hides (still linked in the footer), so every control is fully on-screen again. - Fast double-taps reopened the drawer: the backdrop released pointer events the instant the close started, so the second tap hit the trigger under it. The overlay now keeps intercepting until its fade finishes (delayed visibility transition). - iOS scroll chaining: dragging the dimmed backdrop scrolled the page behind it, and scrolling the drawer rubber-banded the document. The overlay gets touch-action: none and the panel overscroll-behavior: contain.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom
The hamburger menu 'jams' when toggled on phones — taps near the button misfire, and fast taps make the drawer flicker open again.
Root causes (three, compounding)
pointer-eventsimmediately while fading for 220ms; a quick second tap passed through to the trigger and reopened the drawer (visible flicker). Fix: standard delayed-visibilitytransition so the backdrop keeps absorbing taps until the fade completes.touch-action: noneon the overlay,overscroll-behavior: containon the panel.Verified
Compiled CSS carries all four rule changes (
visibility 0s linear .22s,touch-action:none,overscroll-behavior:contain,.header-github{display:none}+.site-header-grid{gap:8px}in the ≤767px block). lint ✓ typecheck ✓ build ✓. Touch behavior itself needs a real phone — please re-test the toggle after deploy.