From 0112eaa1490f87661d09b5cf0551f50325e62993 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Mon, 1 Jun 2026 11:28:31 +0200
Subject: [PATCH] fix: shrink region-grid + hide extra ledger cols on mobile

aggregator-head-lag (and other geo-distributed Solana benches) showed
overflow on iPhone because:

- region-grid cells used grid-cols-[1fr_5rem] on every viewport; with
  3 regions + a 128px Product column the table intrinsic min was ~404px
  > 375px iPhone SE viewport. Now: grid-cols-[1fr_auto] on mobile,
  Product col w-20 (80px) instead of w-32, tighter gap, smaller value
  font. Stays at the original densities from sm: up.
- ledger Slot delta and Secondary columns were visible on mobile (no
  hidden md:table-cell), adding 2 extra mono columns to benches with
  hasSlots/secondary. Now hidden on mobile like the other aggregate
  columns (p90/p99/Mean/Delta/Success).
---
 src/components/ledger-table.tsx | 12 ++++++------
 src/components/region-grid.tsx  | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/ledger-table.tsx b/src/components/ledger-table.tsx
index 5ee3a429..53355728 100644
--- a/src/components/ledger-table.tsx
+++ b/src/components/ledger-table.tsx
@@ -75,14 +75,14 @@ export function LedgerTable({ benchmark }: Props) {
             <th className="border-y-2 border-ink py-2 pl-3 text-right">Trend</th>
             {hasSlots && (
               <th
-                className="border-y-2 border-ink py-2 pl-3 text-right"
+                className="border-y-2 border-ink py-2 pl-3 text-right hidden md:table-cell"
                 title="Slot delta = number of Solana slots between submit and confirmed. Canonical on-chain measurement (~400 ms per slot)."
               >
                 Slot delta
               </th>
             )}
             {secondary && (
-              <th className="border-y-2 border-ink py-2 pl-3 text-right">
+              <th className="border-y-2 border-ink py-2 pl-3 text-right hidden md:table-cell">
                 {secondary}
               </th>
             )}
@@ -98,8 +98,8 @@ export function LedgerTable({ benchmark }: Props) {
             <th className="py-2 px-3 text-right hidden md:table-cell">Δ field</th>
             <th className="py-2 px-3 text-right hidden md:table-cell">Success</th>
             <th className="py-2 pl-3 text-right">24h</th>
-            {hasSlots && <th className="py-2 pl-3 text-right">p50 / p99</th>}
-            {secondary && <th className="py-2 pl-3 text-right">Value</th>}
+            {hasSlots && <th className="py-2 pl-3 text-right hidden md:table-cell">p50 / p99</th>}
+            {secondary && <th className="py-2 pl-3 text-right hidden md:table-cell">Value</th>}
           </tr>
           <tr className="border-b border-ink">
             <th
@@ -289,7 +289,7 @@ function Row({
           </td>
           {hasSlots && (
             <td
-              className="py-2.5 pl-3 text-right text-ink-soft whitespace-nowrap font-mono text-[12px]"
+              className="py-2.5 pl-3 text-right text-ink-soft whitespace-nowrap font-mono text-[12px] hidden md:table-cell"
               title="p50 / p99 slot delta — canonical Solana on-chain measurement"
             >
               {r.slots
@@ -298,7 +298,7 @@ function Row({
             </td>
           )}
           {hasSecondary && (
-            <td className="py-2.5 pl-3 text-right text-ink-soft">
+            <td className="py-2.5 pl-3 text-right text-ink-soft hidden md:table-cell">
               {r.secondary?.value ?? "-"}
             </td>
           )}
diff --git a/src/components/region-grid.tsx b/src/components/region-grid.tsx
index 73c8ea00..eeeb8609 100644
--- a/src/components/region-grid.tsx
+++ b/src/components/region-grid.tsx
@@ -41,7 +41,7 @@ export function RegionGrid({ benchmark }: Props) {
       <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>
+            <th className="py-2 pr-3 text-left font-medium w-20 sm:w-44">Product</th>
             {REGIONS.map((region) => (
               <th key={region.key} className="py-2 px-2 text-left font-medium">
                 {region.label}
@@ -73,10 +73,10 @@ export function RegionGrid({ benchmark }: Props) {
                   const max = regionMax.get(region.key) ?? 1;
                   const pct = Math.max(2, (point.p50 / max) * 100);
                   return (
-                    <td key={region.key} className="py-3 px-2">
-                      <div className="grid grid-cols-[1fr_5rem] items-center gap-3">
+                    <td key={region.key} className="py-3 px-1 sm:px-2 min-w-0">
+                      <div className="grid grid-cols-[1fr_auto] sm:grid-cols-[1fr_5rem] items-center gap-1.5 sm:gap-3 min-w-0">
                         <div
-                          className="relative h-3 rounded-sm overflow-hidden"
+                          className="relative h-3 rounded-sm overflow-hidden min-w-0"
                           style={{ background: `${color}14` /* 8% */ }}
                         >
                           <span
@@ -89,7 +89,7 @@ export function RegionGrid({ benchmark }: Props) {
                           />
                         </div>
                         <span
-                          className="font-mono text-[12px] tabular text-right whitespace-nowrap"
+                          className="font-mono text-[11px] sm:text-[12px] tabular text-right whitespace-nowrap"
                           style={{ color }}
                         >
                           {fmtUnit(point.p50, unit)}