From e4baecb00f317fa14e50a61c96a2ea5661374b0c Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Tue, 12 May 2026 01:20:55 +0300
Subject: [PATCH 1/3] fix(nav): extend mobile drawer through tablet widths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/globals.css                | 13 +++++++++++--
 components/site/Chrome.tsx     |  8 ++++----
 components/site/MobileMenu.tsx |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index f5d1384..216315f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1090,6 +1090,15 @@ a.underline-brutal:hover .arrow {
   transform: translate3d(0, 0, 0);
 }
 
+/* Tablet widths up to the desktop gate (1280px) get a wider panel.
+   The clamp 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;
@@ -1237,10 +1246,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 {
diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
index 4323ef1..0ab3322 100644
--- a/components/site/Chrome.tsx
+++ b/components/site/Chrome.tsx
@@ -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 (
@@ -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>
@@ -203,7 +203,7 @@ export function Chrome() {
             href={links.litepaper}
             target="_blank"
             rel="noopener noreferrer"
-            className="meta hidden items-center gap-2 no-underline md:flex"
+            className="meta hidden items-center gap-2 no-underline xl:flex"
             style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
           >
             <span>Litepaper</span>
diff --git a/components/site/MobileMenu.tsx b/components/site/MobileMenu.tsx
index 06c28bf..8fbaa4d 100644
--- a/components/site/MobileMenu.tsx
+++ b/components/site/MobileMenu.tsx
@@ -253,7 +253,7 @@ export function MobileMenu({ activeSection, tone, onOpenChange }: Props) {
   // 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);
     };

From 9b18b88d8463ab3b6880369b0ea12c869316ebd5 Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Tue, 12 May 2026 01:45:33 +0300
Subject: [PATCH 2/3] fix(nav): update Litepaper link styling for consistency

---
 components/site/Chrome.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
index 0ab3322..3b14861 100644
--- a/components/site/Chrome.tsx
+++ b/components/site/Chrome.tsx
@@ -203,8 +203,7 @@ export function Chrome() {
             href={links.litepaper}
             target="_blank"
             rel="noopener noreferrer"
-            className="meta hidden items-center gap-2 no-underline xl: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>

From fd745a1995f15db0e7b713cb09d1fac2e7328699 Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Tue, 12 May 2026 01:45:59 +0300
Subject: [PATCH 3/3] refactor(nav): apply review polish from PR #92
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/globals.css                | 5 ++---
 components/site/MobileMenu.tsx | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 216315f..38200e4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1090,9 +1090,8 @@ a.underline-brutal:hover .arrow {
   transform: translate3d(0, 0, 0);
 }
 
-/* Tablet widths up to the desktop gate (1280px) get a wider panel.
-   The clamp floor matches the phone cap (380px) so the panel never
-   shrinks across the 768px crossover. */
+/* 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);
diff --git a/components/site/MobileMenu.tsx b/components/site/MobileMenu.tsx
index 8fbaa4d..d50dc19 100644
--- a/components/site/MobileMenu.tsx
+++ b/components/site/MobileMenu.tsx
@@ -249,9 +249,9 @@ 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: 1280px)");
     const onChange = (e: MediaQueryListEvent) => {