Stop the note column wrapping the whole row

It was the only one of eleven columns with no width, so it lived on whatever
slack was left once kind, label and counts-toward took theirs -- and it holds
the longest text of any of them. Before label and bucket existed it also held
the operation badge and the segment name, and had the room for them.

Now one line with an ellipsis, the full text on hover, and unclipped in the
expand panel underneath, which already renders it. w-full with max-w-0 is
what lets a cell in an auto-layout table absorb the slack and still clip;
with only w-full the column grows to fit and nothing truncates.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-09-17 22:57:20 -04:00
parent 98322a6080
commit 98f7bbef34

View File

@ -409,7 +409,7 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
<th className="px-3 py-1.5 font-medium">#</th>
<th className="px-3 py-1.5 font-medium w-20">kind</th>
<th className="px-3 py-1.5 font-medium w-48">label</th>
<th className="px-3 py-1.5 font-medium">note</th>
<th className="px-3 py-1.5 font-medium w-full max-w-0">note</th>
<th className="px-3 py-1.5 font-medium w-36">counts toward</th>
<th className="px-3 py-1.5 font-medium text-right">rows</th>
<th className="px-3 py-1.5 font-medium text-right">{log[0]?.value_col || 'value'}</th>
@ -464,8 +464,17 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
focus:border-blue-400 rounded px-1 py-0.5 text-xs
focus:outline-none bg-transparent" />
</td>
<td className="px-3 py-2">
{entry.note || <span className="text-gray-300"></span>}
{/* One line, clipped. The note is provenance -- it can run
long -- and this row is eleven columns wide, so it used
to wrap and push every row to two or three lines. w-full
plus max-w-0 is what lets a cell in an auto-layout table
absorb the slack and still clip: without the max-w-0 the
column simply grows to fit the text. Expanding the row
shows it in full. */}
<td className="px-3 py-2 w-full max-w-0">
{entry.note
? <div className="truncate" title={entry.note}>{entry.note}</div>
: <span className="text-gray-300"></span>}
</td>
<td className="px-3 py-2" onClick={e => e.stopPropagation()}>
<input