Repository navigation
fix(nav): extend mobile drawer through tablet widths - #92
Merged
Merged
Conversation
The drawer was gated to phones at 768px, which left iPad portrait (~768–834px) and similar tablet widths showing the crowded desktop nav. Lift the gate to 1280px so the drawer covers phones through small laptops, and scale the panel width to clamp(380px, 48vw, 520px) above 768px so tablets get a proportional drawer without shrinking at the 768px crossover. - app/globals.css: gate 768px → 1280px; new tablet panel-width rule - components/site/MobileMenu.tsx: matchMedia 768px → 1280px to keep the auto-close listener in lockstep with the CSS gate - components/site/Chrome.tsx: md:flex → xl:flex on the four desktop nav clusters Closes #91 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying website with
|
| Latest commit: |
fd745a1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://90357a9f.website-70y.pages.dev |
| Branch Preview URL: | https://fix-91-drawer-tablet-breakpo.website-70y.pages.dev |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the responsive breakpoints for the mobile menu and navigation components, shifting the transition from mobile/tablet to desktop from 768px to 1280px. It also introduces a specific panel width for tablet devices using a CSS clamp. A review comment suggests improving codebase consistency in Chrome.tsx by replacing inline styles on the 'Litepaper' link with Tailwind utility classes to match the 'Docs' and 'Blog' links.
There was a problem hiding this comment.
Pull request overview
This PR extends the mobile drawer navigation behavior through tablet and small-laptop widths by moving the “desktop nav” cutoff from 768px to 1280px, and adjusts the drawer panel sizing so it feels proportionate on tablets.
Changes:
- Updated the JS resize/desktop-close breakpoint in
MobileMenu.tsxfrom 768px to 1280px so the drawer auto-closes when crossing into true desktop widths. - Switched desktop-nav Tailwind visibility from
md:flextoxl:flexinChrome.tsxso desktop nav elements stay hidden until 1280px. - Updated global CSS gating and added a tablet-width panel sizing rule (
clamp(380px, 48vw, 520px)) for.mm-panel.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| components/site/MobileMenu.tsx | Aligns matchMedia “close on desktop” behavior with the new 1280px desktop gate. |
| components/site/Chrome.tsx | Defers desktop nav/link visibility to xl so tablets use the mobile drawer. |
| app/globals.css | Moves the drawer CSS hide breakpoint to 1280px and scales drawer panel width for tablet ranges. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Chrome.tsx: drop inline style on Litepaper anchor in favour of border-b border-current pb-[2px] so it matches the Docs and Blog siblings character-for-character (Gemini review consistency note). - globals.css: tighten the tablet panel-width comment to just the WHY (the floor matching the phone cap, preventing crossover shrink). The "tablet widths get a wider panel" framing was restating what the media query already says. - MobileMenu.tsx: append "(≥1280px, matches the CSS gate)" to the matchMedia comment so a reader cross-checking against globals.css can grep the threshold. No behavior change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
768px→1280pxso iPad portrait and similar tablet/small-laptop widths get the mobile drawer instead of the crowded desktop nav..mm-panelwidth toclamp(380px, 48vw, 520px)above 768px so tablets get a proportional panel. The clamp floor matches the phone cap, so the panel never shrinks at the 768px crossover.matchMediainMobileMenu.tsxandmd:flex→xl:flexinChrome.tsxso JS + Tailwind utilities track the new CSS gate.Follow-up polish (fd745a1)
Chrome.tsx— Litepaper anchor moved from inlinestyletoborder-b border-current pb-[2px]so it matches Docs/Blog character-for-character (Gemini review consistency note).globals.css— tightened the new tablet panel-width comment to just the WHY (floor-matching, crossover shrink prevention).MobileMenu.tsx—matchMediacomment now records the≥1280pxthreshold so a reader can grep it against the CSS gate.Closes #91.
Test plan
pnpm lintandpnpm buildclean🤖 Generated with Claude Code