fix: mobile overflow on benchmark detail pages

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>
 

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;
 }

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>

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">

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>

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>