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

Move the bucket order row and its datalist out of the table

Browse Source 
Both were direct children of <table>, which is invalid: a browser hoists
stray non-table content out of the element, and in doing so it disturbed the
column widths of the segment listing below.

The datalist was already there before this change and had been getting away
with it; adding a visible div beside it is what made the consequence
obvious.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-09-17 13:43:09 -04:00
parent 8c1f5b8f60
commit 5455d8089a
1 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -414,49 +414,49 @@ export default function Baseline({ sources = [], sourceId, versions = [], versio
<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>
</div>
<table className="w-full text-xs">
{/* Bucket column order. Up/down rather than drag: the list is four or
five items that change once a quarter, and a keyboard-reachable
pair of buttons beats a drag target nobody can hit on a laptop
trackpad. */}
{bucketOrder.length > 1 && (
<div className="flex items-center gap-2 flex-wrap px-3 py-2 border-b border-gray-100">
<span className="text-gray-500 text-xs whitespace-nowrap">column order</span>
{bucketOrder.map((b, i) => (
<span key={b}
className="inline-flex items-center gap-1 border border-gray-200 rounded
pl-2 pr-1 py-0.5 text-xs bg-white">
<span className="text-gray-400 tabular-nums">{String(i + 1).padStart(2, '0')} -</span>
<span className="text-gray-700">{b}</span>
<button
disabled={i === 0}
onClick={() => {
const next = [...bucketOrder]
;[next[i - 1], next[i]] = [next[i], next[i - 1]]
saveBucketOrder(next)
}}
title="Move earlier"
className="text-gray-400 hover:text-blue-600 disabled:opacity-25 px-0.5 leading-none">◀</button>
<button
disabled={i === bucketOrder.length - 1}
onClick={() => {
const next = [...bucketOrder]
;[next[i], next[i + 1]] = [next[i + 1], next[i]]
saveBucketOrder(next)
}}
title="Move later"
className="text-gray-400 hover:text-blue-600 disabled:opacity-25 px-0.5 leading-none">▶</button>
</span>
))}
</div>
)}
{/* Bucket column order. Up/down rather than drag: the list is four or
five items that change once a quarter, and a keyboard-reachable
pair of buttons beats a drag target nobody can hit on a laptop
trackpad. */}
{bucketOrder.length > 1 && (
<div className="flex items-center gap-2 flex-wrap px-3 py-2 border-b border-gray-100">
<span className="text-gray-500 text-xs whitespace-nowrap">column order</span>
{bucketOrder.map((b, i) => (
<span key={b}
className="inline-flex items-center gap-1 border border-gray-200 rounded
pl-2 pr-1 py-0.5 text-xs bg-white">
<span className="text-gray-400 tabular-nums">{String(i + 1).padStart(2, '0')} -</span>
<span className="text-gray-700">{b}</span>
<button
disabled={i === 0}
onClick={() => {
const next = [...bucketOrder]
;[next[i - 1], next[i]] = [next[i], next[i - 1]]
saveBucketOrder(next)
}}
title="Move earlier"
className="text-gray-400 hover:text-blue-600 disabled:opacity-25 px-0.5 leading-none">◀</button>
<button
disabled={i === bucketOrder.length - 1}
onClick={() => {
const next = [...bucketOrder]
;[next[i], next[i + 1]] = [next[i + 1], next[i]]
saveBucketOrder(next)
}}
title="Move later"
className="text-gray-400 hover:text-blue-600 disabled:opacity-25 px-0.5 leading-none">▶</button>
</span>
))}
</div>
)}
<datalist id="pf-bucket-options">
<option value="Forecast" />
<option value="Prior Year" />
<option value="Prior Prior Year" />
<option value="Plan" />
</datalist>
<datalist id="pf-bucket-options">
<option value="Forecast" />
<option value="Prior Year" />
<option value="Prior Prior Year" />
<option value="Plan" />
</datalist>
<table className="w-full 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>