From 9747e6fa3afd10f7e9487cc8ea6ebd98236138f1 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Mon, 1 Jun 2026 07:06:31 +0200
Subject: [PATCH] fix: mobile overflow on benchmark detail pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tables (ledger, region-grid): min-w only applies from sm: so mobile
  shrinks the table inside its overflow-x-auto wrapper instead of
  forcing 480/520px and pushing the whole page past the viewport edge
- count-leaderboard summary strip stacks 1-col on mobile, reduces
  gap-x so 'RANGE 40 → 306 7 providers' no longer cuts off
- summary-stat removes the 8rem min-width on mobile flex children
- breadcrumb + bench identifier lower tracking on mobile, last crumb
  truncates at 60vw so long titles can't push the row off-screen
- Title + subtitle get break-words as safety net
- html { overflow-x: clip } as a final root-level safety net
---
 src/app/benchmarks/[slug]/page.tsx   | 14 ++++++++------
 src/app/globals.css                  |  6 ++++++
 src/components/count-leaderboard.tsx |  8 ++++----
 src/components/ledger-table.tsx      |  2 +-
 src/components/region-grid.tsx       |  2 +-
 src/components/summary-stat.tsx      |  2 +-
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/benchmarks/[slug]/page.tsx b/src/app/benchmarks/[slug]/page.tsx
index 559b2ab3..ed36aac1 100644
--- a/src/app/benchmarks/[slug]/page.tsx
+++ b/src/app/benchmarks/[slug]/page.tsx
@@ -315,9 +315,9 @@ export default async function BenchmarkPage({
           so Google can show the crumb above the URL in the SERP. */}
       <nav
         aria-label="Breadcrumb"
-        className="mb-3 text-[11px] font-medium uppercase tracking-[0.16em] text-ink-faint"
+        className="mb-3 text-[11px] font-medium uppercase tracking-[0.08em] sm:tracking-[0.16em] text-ink-faint"
       >
-        <ol className="flex flex-wrap items-center gap-1.5">
+        <ol className="flex flex-wrap items-center gap-1 sm:gap-1.5 min-w-0">
           <li>
             <Link href="/" className="hover:text-ink transition-colors">
               Home
@@ -330,7 +330,9 @@ export default async function BenchmarkPage({
             </Link>
           </li>
           <li aria-hidden>/</li>
-          <li className="text-ink-muted">{benchmark.title}</li>
+          <li className="text-ink-muted truncate max-w-[60vw] sm:max-w-none">
+            {benchmark.title}
+          </li>
         </ol>
       </nav>
 
@@ -356,7 +358,7 @@ export default async function BenchmarkPage({
       </div>
 
       {/* Bench identifier - minimal mono line, no SaaS-style pills. */}
-      <div className="mt-6 flex flex-wrap items-center gap-3 font-sans text-[11px] uppercase tracking-[0.18em] text-ink-muted font-medium">
+      <div className="mt-6 flex flex-wrap items-center gap-3 font-sans text-[11px] uppercase tracking-[0.1em] sm:tracking-[0.18em] text-ink-muted font-medium">
         <span style={{ color: catColor ?? "var(--color-ink-soft)" }}>
           {benchmark.category}
         </span>
@@ -373,10 +375,10 @@ export default async function BenchmarkPage({
       </div>
 
       {/* Title */}
-      <h1 className="mt-5 display text-3xl sm:text-4xl md:text-5xl tracking-tight text-ink">
+      <h1 className="mt-5 display text-3xl sm:text-4xl md:text-5xl tracking-tight text-ink break-words">
         {benchmark.title}
       </h1>
-      <p className="mt-4 max-w-3xl text-lg sm:text-xl text-ink-muted leading-snug">
+      <p className="mt-4 max-w-3xl text-lg sm:text-xl text-ink-muted leading-snug break-words">
         {benchmark.subtitle}
       </p>
 
diff --git a/src/app/globals.css b/src/app/globals.css
index f08005bb..50114e34 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -327,4 +327,10 @@ textarea:focus-visible {
 html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
+  /* Safety net: clip any rogue horizontal overflow at the root so a
+     single wide child (e.g. a min-w table) can never push the whole
+     page off-screen on mobile. Per-component fixes still target the
+     intrinsic min-widths so the clip rarely fires. `clip` (not hidden)
+     avoids creating a scroll container that breaks position: sticky. */
+  overflow-x: clip;
 }
diff --git a/src/components/count-leaderboard.tsx b/src/components/count-leaderboard.tsx
index d437a7e5..8d36d0ac 100644
--- a/src/components/count-leaderboard.tsx
+++ b/src/components/count-leaderboard.tsx
@@ -49,7 +49,7 @@ export function CountLeaderboard({
         </div>
       )}
       {/* Thin summary strip. matches the latency-bench layout. */}
-      <dl className="grid grid-cols-2 sm:flex sm:flex-wrap items-baseline gap-x-8 gap-y-3 border-y border-rule py-4">
+      <dl className="grid grid-cols-1 sm:flex sm:flex-wrap items-baseline gap-x-3 sm:gap-x-8 gap-y-2 sm:gap-y-3 border-y border-rule py-4">
         <CountStat
           label="Leader"
           value={fmtValue(leader?.ms.p50 ?? 0, benchmark.unit)}
@@ -149,11 +149,11 @@ function CountStat({
   hint?: string;
 }) {
   return (
-    <div className="flex items-baseline gap-2">
-      <dt className="font-sans text-[10px] uppercase tracking-[0.18em] text-ink-faint shrink-0 font-medium">
+    <div className="flex items-baseline gap-2 min-w-0">
+      <dt className="font-sans text-[10px] uppercase tracking-[0.14em] sm:tracking-[0.18em] text-ink-faint shrink-0 font-medium">
         {label}
       </dt>
-      <dd className="font-sans tabular text-sm text-ink leading-none">
+      <dd className="font-sans tabular text-sm text-ink leading-none min-w-0 truncate">
         {value}
         {hint ? (
           <span className="ml-1.5 text-ink-muted text-xs font-normal">{hint}</span>
diff --git a/src/components/ledger-table.tsx b/src/components/ledger-table.tsx
index 2803636c..5ee3a429 100644
--- a/src/components/ledger-table.tsx
+++ b/src/components/ledger-table.tsx
@@ -56,7 +56,7 @@ export function LedgerTable({ benchmark }: Props) {
 
   return (
     <div className="overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
-      <table className="ledger w-full min-w-[480px] md:min-w-0 border-collapse">
+      <table className="ledger w-full min-w-full sm:min-w-[480px] md:min-w-0 border-collapse">
         <thead>
           <tr>
             <th colSpan={3} className="border-y-2 border-ink py-2 pr-3 text-left">
diff --git a/src/components/region-grid.tsx b/src/components/region-grid.tsx
index 1d8c70be..73c8ea00 100644
--- a/src/components/region-grid.tsx
+++ b/src/components/region-grid.tsx
@@ -38,7 +38,7 @@ export function RegionGrid({ benchmark }: Props) {
 
   return (
     <div className="border-y-2 border-ink py-2 overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
-      <table className="w-full min-w-[520px] border-collapse text-sm tabular">
+      <table className="w-full min-w-full sm:min-w-[520px] border-collapse text-sm tabular">
         <thead>
           <tr className="font-sans text-[10px] uppercase tracking-[0.18em] text-ink-soft">
             <th className="py-2 pr-3 text-left font-medium w-32 sm:w-44">Product</th>
diff --git a/src/components/summary-stat.tsx b/src/components/summary-stat.tsx
index 073d845a..36a1d554 100644
--- a/src/components/summary-stat.tsx
+++ b/src/components/summary-stat.tsx
@@ -24,7 +24,7 @@ export function SummaryStat({
   hint?: string;
 }) {
   return (
-    <div className="flex-1 min-w-[8rem] flex flex-col gap-1.5 px-5 py-4 sm:px-6 sm:py-5">
+    <div className="flex-1 min-w-0 sm:min-w-[8rem] flex flex-col gap-1.5 px-5 py-4 sm:px-6 sm:py-5">
       <dt className="label-mono text-ink-faint">
         {label}
       </dt>