pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Size the table to its content, not to the window

Browse Source 
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>
This commit is contained in:
Paul Trowbridge 2026-09-17 23:02:38 -04:00
parent 602effde73
commit 3162759f93
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/views/Baseline.jsx
View File

@ -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) const longest = values.reduce((n, v) => Math.max(n, String(v || '').length), 0)
return `${Math.min(max, Math.max(min, longest + 2))}ch` 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 labelW = widthCh(log.map(e => e.label || e.tag || e.note), 18, 34)
const bucketW = widthCh(log.map(e => e.bucket), 16, 28) const bucketW = widthCh(log.map(e => e.bucket), 16, 24)
const noteW = widthCh(log.map(e => e.note), 24, 60) const noteW = widthCh(log.map(e => e.note), 22, 44)
function loadLog() { function loadLog() {
fetch(`/api/versions/${versionId}/log`).then(r => r.json()).then(data => { fetch(`/api/versions/${versionId}/log`).then(r => r.json()).then(data => {
@ -354,10 +354,11 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
return ( return (
<div className="h-full overflow-y-auto bg-gray-50"> <div className="h-full overflow-y-auto bg-gray-50">
{/* Uncapped: the segment table is eleven columns, and at max-w-4xl (896px) {/* No page-wide cap and no stretching: at max-w-4xl (896px) the eleven-column
something always got smashed no matter how the widths were divided. The segment table always had something smashed, and uncapped it ran to the
blocks that read better narrow keep their own caps. */} window. items-start makes each block as wide as its own content needs,
<div className="p-4 flex flex-col gap-4"> 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 && ( {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'}`}> <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 && <> {versionId && <>
{/* Segments loaded */} {/* 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"> <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> <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> <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} /> <option key={b} value={b} />
))} ))}
</datalist> </datalist>
<table className="w-full text-xs"> <table className="text-xs">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr className="text-left text-gray-400 border-b border-gray-100"> <tr className="text-left text-gray-400 border-b border-gray-100">
<th className="px-3 py-1.5 font-medium w-6"></th> <th className="px-3 py-1.5 font-medium w-6"></th>