Split accuracy table into fixed model column and scrollable metrics

The model column sits outside the scrollable area so it remains visible
without needing a background color that clashes with the page gradient.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app.js

@@ -760,11 +760,6 @@ async function buildAccuracyTable() {
     const card = document.createElement("div");
     card.className = "table-card";
 
-    let html = `<h3>Accuracy</h3><div class="table-scroll"><table><thead><tr>`;
-    html += `<th>MODEL</th>`;
-    html += metricCols.map(h => `<th class="metric-cell">${h}</th>`).join("");
-    html += `</tr></thead><tbody>`;
-
     // Find best value per column (higher is better for accuracy)
     const best = {};
     metricCols.forEach(col => {
@@ -772,21 +767,32 @@ async function buildAccuracyTable() {
         if (vals.length) best[col] = Math.max(...vals);
     });
 
+    // Fixed model column
+    let fixedHtml = `<table><thead><tr><th>MODEL</th></tr></thead><tbody>`;
     rows.forEach(r => {
         const model = r[modelCol];
         const modelColor = MODEL_COLORS[model]?.border || '#888';
-        html += `<tr><td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${LINK_PREFIX}${model}" target="_blank" rel="noopener" style="color:${modelColor}">${model}</a></td>`;
+        fixedHtml += `<tr><td class="model-cell"><span class="model-dot" style="background:${modelColor}"></span><a href="${LINK_PREFIX}${model}" target="_blank" rel="noopener" style="color:${modelColor}">${model}</a></td></tr>`;
+    });
+    fixedHtml += `</tbody></table>`;
+
+    // Scrollable metric columns
+    let scrollHtml = `<table><thead><tr>`;
+    scrollHtml += metricCols.map(h => `<th class="metric-cell">${h}</th>`).join("");
+    scrollHtml += `</tr></thead><tbody>`;
+    rows.forEach(r => {
+        scrollHtml += `<tr>`;
         metricCols.forEach(col => {
             const val = parseFloat(r[col]);
             const isBest = !isNaN(val) && val === best[col];
             const display = isNaN(val) ? (r[col] || "—") : val.toFixed(2);
-            html += `<td class="metric-cell">${isBest ? '<strong style="color: white; opacity: 0.7">' + display + '</strong>' : display}</td>`;
+            scrollHtml += `<td class="metric-cell">${isBest ? '<strong style="color: white; opacity: 0.7">' + display + '</strong>' : display}</td>`;
         });
-        html += `</tr>`;
+        scrollHtml += `</tr>`;
     });
+    scrollHtml += `</tbody></table>`;
 
-    html += `</tbody></table></div>`;
-    card.innerHTML = html;
+    card.innerHTML = `<h3>Accuracy</h3><div class="table-split"><div class="table-split-fixed">${fixedHtml}</div><div class="table-split-scroll">${scrollHtml}</div></div>`;
     section.appendChild(card);
 }
 

style.css

@@ -385,12 +385,25 @@ tbody tr.row-group-break td {
 }
 
 /* ── Sticky first column in scrollable tables ─────────── */
-.table-scroll th:first-child,
-.table-scroll td:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background: var(--bg);
+.table-split {
+    display: flex;
+}
+
+.table-split-fixed table,
+.table-split-scroll table {
+    width: 100%;
+}
+
+.table-split-fixed {
+    flex-shrink: 0;
+}
+
+.table-split-scroll {
+    overflow-x: auto;
+    flex: 1;
+    min-width: 0;
+    scrollbar-color: var(--text-dim) var(--border);
+    scrollbar-width: thin;
 }
 .legend-section {
     margin: 2rem 0;