From ec9596228cd9b9bc25ce4952ad055bfd2db14743 Mon Sep 17 00:00:00 2001
From: hmziqagent <hmziqagent@gmail.com>
Date: Tue, 28 Jul 2026 10:55:42 +0200
Subject: [PATCH] fix(web): stop horizontal overflow on mobile landing sections

Three landing grids used `grid lg:grid-cols-[...]` with no base `grid-cols-1`, so the implicit column sized to max-content and wide children (a long tab label, a long code line, the event-log panel) inflated the page to ~622px on mobile, forcing horizontal scroll.

- HookTabs: add base grid-cols-1; make the tab nav scroll (min-w-0 max-w-full overflow-x-auto) and keep buttons from compressing (shrink-0 whitespace-nowrap). The nav is a flex item of Basecoat's .tabs, so min-w-0 is required for overflow-x-auto to engage.
- AnnotatedFigure: add base grid-cols-1 so the <pre> scrolls instead of inflating its card to 529px.
- CacheDeck: add base grid-cols-1 so the event-log panel fits.
- architecture-section: `truncate` -> `sm:truncate` so the layer API list wraps on mobile instead of ellipsizing the content away.

Desktop (lg) layouts are unchanged. Verified at 390/360/320px: document scrollWidth now equals the viewport (no horizontal scroll), and `bun run build` passes.
---
 web/src/components/landing/architecture-section.astro | 2 +-
 web/src/components/landing/v1/HookTabs.astro          | 6 +++---
 web/src/components/landing/v2/CacheDeck.astro         | 2 +-
 web/src/components/landing/v3/AnnotatedFigure.astro   | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/landing/architecture-section.astro b/web/src/components/landing/architecture-section.astro
index 029d0b4..229ca7f 100644
--- a/web/src/components/landing/architecture-section.astro
+++ b/web/src/components/landing/architecture-section.astro
@@ -49,7 +49,7 @@ const archLayers = [
             <Icon name={layer.icon} size={20} class="shrink-0 text-primary" />
             <div class="min-w-0">
               <p class="font-display text-sm font-bold tracking-widest uppercase text-foreground">{layer.label}</p>
-              <p class="mt-0.5 truncate font-mono text-sm text-muted-foreground">{layer.items}</p>
+              <p class="mt-0.5 sm:truncate font-mono text-sm text-muted-foreground">{layer.items}</p>
             </div>
           </div>
         </div>
diff --git a/web/src/components/landing/v1/HookTabs.astro b/web/src/components/landing/v1/HookTabs.astro
index 08e4de5..0bd1849 100644
--- a/web/src/components/landing/v1/HookTabs.astro
+++ b/web/src/components/landing/v1/HookTabs.astro
@@ -58,7 +58,7 @@ mutate_with_callbacks(
 
 <section class="border-t border-border py-20 sm:py-24">
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-    <div class="grid items-start gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+    <div class="grid grid-cols-1 items-start gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
       <div>
         <p class="font-mono text-xs tracking-[0.25em] uppercase text-primary">
           <span class="text-primary/50">// </span>surface area
@@ -81,7 +81,7 @@ mutate_with_callbacks(
       <div class="relative">
         <CornerMarks />
         <div class="tabs border border-border bg-card shadow-sm" data-hook-tabs>
-          <nav role="tablist" aria-label="Hook examples" class="flex border-b border-border">
+          <nav role="tablist" aria-label="Hook examples" class="flex min-w-0 max-w-full overflow-x-auto border-b border-border">
             {HOOK_TABS.map((t, i) => (
               <button
                 type="button"
@@ -91,7 +91,7 @@ mutate_with_callbacks(
                 aria-selected={i === 0 ? "true" : "false"}
                 tabindex={i === 0 ? "0" : "-1"}
                 data-tab={t.id}
-                class={`border-r border-border px-4 py-3 font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none ${
+                class={`border-r border-border shrink-0 whitespace-nowrap px-4 py-3 font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none ${
                   i === 0 ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground"
                 }`}
               >
diff --git a/web/src/components/landing/v2/CacheDeck.astro b/web/src/components/landing/v2/CacheDeck.astro
index 1bebdbc..45b3f02 100644
--- a/web/src/components/landing/v2/CacheDeck.astro
+++ b/web/src/components/landing/v2/CacheDeck.astro
@@ -60,7 +60,7 @@ const rows = INITIAL_ENTRIES.map((entry) => {
       </span>
     </div>
 
-    <div class="grid lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
+    <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
       <div class="border-b border-border lg:border-r lg:border-b-0">
         <div data-entries>
           {rows.map((row) => (
diff --git a/web/src/components/landing/v3/AnnotatedFigure.astro b/web/src/components/landing/v3/AnnotatedFigure.astro
index 9c3b28c..fcd6be1 100644
--- a/web/src/components/landing/v3/AnnotatedFigure.astro
+++ b/web/src/components/landing/v3/AnnotatedFigure.astro
@@ -84,7 +84,7 @@ const figInner = FIG_LINES.map((line, i) => {
       Every line, accounted for
     </h2>
 
-    <div class="mt-12 grid gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
+    <div class="mt-12 grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
       <div class="border border-border bg-card shadow-sm">
         <div class="flex items-center justify-between border-b border-border px-4 py-2.5">
           <span class="font-mono text-xs text-muted-foreground">src/views/users.rs</span>