Mobile nav: fix login button overlapping page H1, bump hamburger to 44px#24
Open
bloppbot wants to merge 1 commit into
Open
Mobile nav: fix login button overlapping page H1, bump hamburger to 44px#24bloppbot wants to merge 1 commit into
bloppbot wants to merge 1 commit into
Conversation
…44px Two related fixes for the mobile nav (≤900px): 1. The auth block (Log in with Steam / user menu) was 'position: absolute; top: 100%' which placed it floating below the nav header even when the hamburger menu was closed, overlapping the page H1 on every inner route. Now hidden when the menu is closed, and shown inline at the bottom of the drawer when opened. Login is still reachable via the hamburger — same model as the rest of the nav. 2. The hamburger toggle was 32×32px, below the WCAG 44×44px tap target minimum (Lighthouse target-size flagged this). Bumped to 44×44 with matching padding so the icon stays the same visual size. Also collapsed the two duplicate '@media (max-width: 900px)' blocks into one for clarity.
✅ Deploy Preview for windrun ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
1 participant
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.
Hey @Noxville — second small contribution. Two related fixes for the mobile nav, both behind
@media (max-width: 900px)so desktop is untouched. Let me know if you'd rather have these split.This does not touch tables / DataTable / wide pages — that's a much bigger conversation about column collapsing or card mode under ~640px and I want to talk about scope before I start. Happy to hear your thoughts in a separate issue or here.
1. "Log in with Steam" no longer overlaps the page H1
Before: in
Navigation.module.css, the.authblock (login button or user menu) hadposition: absolute; top: 100%; right: var(--space-md); margin-top: var(--space-md);inside the≤900pxmedia query. So even when the hamburger menu was closed, the auth block was rendered as a floating element below the nav header — landing on top of the page H1 (visible on Leaderboard, Player profile, Hero detail, Ability detail, etc.).After: hidden when the mobile menu is closed, shown inline at the bottom of the drawer when it opens (using the existing
.linksOpen ~ .authsibling selector). Login stays reachable, same model as the rest of the nav items.I also collapsed the two duplicate
@media (max-width: 900px)blocks at the bottom of the file into one — there were a few overlapping rules across them, slightly unwound the redundancy while I was in there.2. Hamburger toggle bumped from 32×32 → 44×44
WCAG / Lighthouse
target-sizeflags anything under 44×44 as a tap target violation, and the hamburger was 32×32. The icon (the bars) stays the same visual size — just gave the button enough padding to clear 44×44.Verification
npm run buildclean, no new warnings..authdefaults todisplay: flexfrom the base rule, mobile media query sets it todisplay: none, then.linksOpen ~ .authflips it back todisplay: flexwhen the drawer opens. Should be no flash on toggle..authso both are gated by the new visibility logic.What's next
If this lands, I want to do a follow-up PR for the heroes / abilities / leaderboard tables on mobile — they currently render their full desktop column set inside an
overflow-x: autowrapper, which produces the "horizontal scroll inside a sub-frame" UX that issue #8 calls out. Open to suggestions on the right approach (priority-column hiding via TanStackcolumnVisibility, vs. card mode under 640px, vs. sticky first column + visible scroll affordance) — happy to start a separate issue or sketch a small POC PR if you'd prefer.