From 5455d8089a37e6176c72ad07f386c74d975c7fc7 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Thu, 17 Sep 2026 13:43:09 -0400
Subject: [PATCH] Move the bucket order row and its datalist out of the table

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>
---
 ui/src/views/Baseline.jsx | 84 +++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/ui/src/views/Baseline.jsx b/ui/src/views/Baseline.jsx
index 270c71d..a41b18e 100644
--- a/ui/src/views/Baseline.jsx
+++ b/ui/src/views/Baseline.jsx
@@ -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>