From 3162759f93b815b74f88550342dc8bc747733d54 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Thu, 17 Sep 2026 23:02:38 -0400
Subject: [PATCH] Size the table to its content, not to the window

Measuring the columns was not enough while the table itself was w-full inside
an uncapped page: it stretched to the window and handed the slack back out,
so the measurements only decided who got squeezed. The table now sizes to its
content and the page uses items-start, so each block is as wide as it needs.

Ceilings pulled in a little too -- with nothing competing for slack they are
the actual width, not a limit on a fight.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/views/Baseline.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/src/views/Baseline.jsx b/ui/src/views/Baseline.jsx
index c145c03..104bc37 100644
--- a/ui/src/views/Baseline.jsx
+++ b/ui/src/views/Baseline.jsx
@@ -174,9 +174,9 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
     const longest = values.reduce((n, v) => Math.max(n, String(v || '').length), 0)
     return `${Math.min(max, Math.max(min, longest + 2))}ch`
   }
-  const labelW  = widthCh(log.map(e => e.label || e.tag || e.note), 18, 40)
-  const bucketW = widthCh(log.map(e => e.bucket), 16, 28)
-  const noteW   = widthCh(log.map(e => e.note), 24, 60)
+  const labelW  = widthCh(log.map(e => e.label || e.tag || e.note), 18, 34)
+  const bucketW = widthCh(log.map(e => e.bucket), 16, 24)
+  const noteW   = widthCh(log.map(e => e.note), 22, 44)
 
   function loadLog() {
     fetch(`/api/versions/${versionId}/log`).then(r => r.json()).then(data => {
@@ -354,10 +354,11 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
 
   return (
     <div className="h-full overflow-y-auto bg-gray-50">
-      {/* Uncapped: the segment table is eleven columns, and at max-w-4xl (896px)
-          something always got smashed no matter how the widths were divided. The
-          blocks that read better narrow keep their own caps. */}
-      <div className="p-4 flex flex-col gap-4">
+      {/* No page-wide cap and no stretching: at max-w-4xl (896px) the eleven-column
+          segment table always had something smashed, and uncapped it ran to the
+          window. items-start makes each block as wide as its own content needs,
+          which for the table is the measured column widths below. */}
+      <div className="p-4 flex flex-col gap-4 items-start max-w-full">
 
         {msg && (
           <div className={`px-3 py-2 text-xs rounded font-medium ${msg.type === 'error' ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>
@@ -406,7 +407,7 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
         {versionId && <>
 
           {/* Segments loaded */}
-          <div className="bg-white border border-gray-200 rounded">
+          <div className="bg-white border border-gray-200 rounded max-w-full">
             <div className="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
               <span>Segments loaded</span>
               <button onClick={clearBaseline} className="text-red-400 hover:text-red-600 text-xs normal-case font-normal">Clear all baseline</button>
@@ -418,7 +419,7 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
                 <option key={b} value={b} />
               ))}
             </datalist>
-            <table className="w-full text-xs">
+            <table className="text-xs">
               <thead className="bg-gray-50">
                 <tr className="text-left text-gray-400 border-b border-gray-100">
                   <th className="px-3 py-1.5 font-medium w-6"></th>