Skip to content

fix(nav): extend mobile drawer through tablet widths #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yigitdot merged 3 commits into from
May 11, 2026
+18 −11
Merged

fix(nav): extend mobile drawer through tablet widths #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e4baecb
fix(nav): extend mobile drawer through tablet widths
yigitdot May 11, 2026
9b18b88
fix(nav): update Litepaper link styling for consistency
yigitdot May 11, 2026
fd745a1
refactor(nav): apply review polish from PR #92
yigitdot May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1090,6 +1090,14 @@ a.underline-brutal:hover .arrow {
transform: translate3d(0, 0, 0);
}

/* Floor matches the phone cap (380px) so the panel never shrinks
across the 768px crossover. */
@media (min-width: 768px) {
.mm-panel {
width: clamp(380px, 48vw, 520px);
}
}

.mm-head {
display: flex;
align-items: center;
Expand Down Expand Up @@ -1237,10 +1245,10 @@ a.underline-brutal:hover .arrow {
}
}

/* Phones only. Gated in CSS instead of Tailwind's md:hidden because
/* Phones and tablets. Gated in CSS instead of Tailwind's xl:hidden because
these custom rules are unlayered and would beat the utilities layer,
leaking the toggle onto desktop. */
@media (min-width: 768px) {
@media (min-width: 1280px) {
.mm-toggle,
.mm-overlay,
.mm-panel {
Expand Down
9 changes: 4 additions & 5 deletions components/site/Chrome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export function Chrome() {
<span className="meta hidden opacity-70 sm:inline">labs</span>
</Link>

<ul className="hidden items-center gap-7 md:flex">
<ul className="hidden items-center gap-7 xl:flex">
{NAV.map((item) => {
const isActive = active === item.id;
return (
Expand All @@ -187,14 +187,14 @@ export function Chrome() {
<div className="col-start-3 flex items-center gap-5 justify-self-end">
<a
href={links.docs}
className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] md:flex"
className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
>
<span>Docs</span>
<span aria-hidden>→</span>
</a>
<Link
href={links.blog}
className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] md:flex"
className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
>
<span>Blog</span>
<span aria-hidden>→</span>
Expand All @@ -203,8 +203,7 @@ export function Chrome() {
href={links.litepaper}
target="_blank"
rel="noopener noreferrer"
className="meta hidden items-center gap-2 no-underline md:flex"
style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
>
<span>Litepaper</span>
<span aria-hidden>→</span>
Expand Down
8 changes: 4 additions & 4 deletions components/site/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,11 +249,11 @@ export function MobileMenu({ activeSection, tone, onOpenChange }: Props) {
wasOpenRef.current = open;
}, [open]);

// Close on resize to desktop. Without this the CSS hides the panel
// but `open` stays true, leaving body scroll locked and the nav
// stuck in forced-paper tone.
// Close on resize to desktop (≥1280px, matches the CSS gate).
// Without this the CSS hides the panel but `open` stays true,
// leaving body scroll locked and the nav stuck in forced-paper tone.
useEffect(() => {
const mql = window.matchMedia("(min-width: 768px)");
const mql = window.matchMedia("(min-width: 1280px)");
const onChange = (e: MediaQueryListEvent) => {
if (e.matches) setOpen(false);
};
Expand Down