Use fixed script column with shared task headers

index.html

@@ -156,13 +156,9 @@
       }[char]));
     }
 
-    function createCaseCell(label, content) {
+    function createCaseCell(content, className = "") {
       const cell = document.createElement("div");
-      cell.className = "case-cell";
-
-      const heading = document.createElement("div");
-      heading.className = "case-cell-label";
-      heading.textContent = label;
+      cell.className = `case-cell ${className}`.trim();
 
       const body = document.createElement("div");
       body.className = "case-cell-body";
@@ -170,19 +166,50 @@
         body.appendChild(content);
       }
 
-      cell.appendChild(heading);
       cell.appendChild(body);
       return cell;
     }
 
+    function createHeaderCell(label) {
+      const cell = document.createElement("div");
+      cell.className = "case-header-cell";
+      cell.textContent = label;
+      return cell;
+    }
+
+    function createCaseHeader(task) {
+      const header = document.createElement("div");
+      header.className = "case-header";
+      header.appendChild(createHeaderCell("Script"));
+
+      const headerScroll = document.createElement("div");
+      headerScroll.className = "case-header-scroll";
+      const headerGrid = document.createElement("div");
+      headerGrid.className = "case-grid";
+      headerGrid.style.setProperty("--model-count", task.models.length);
+
+      if (task.show_reference) {
+        headerGrid.appendChild(createHeaderCell("Reference"));
+      }
+
+      task.models.forEach((model) => {
+        headerGrid.appendChild(createHeaderCell(model));
+      });
+
+      headerScroll.appendChild(headerGrid);
+      header.appendChild(headerScroll);
+      return header;
+    }
+
     function renderTable(task, manifests, taskRoot) {
       const wrapper = document.createElement("div");
       wrapper.className = task.show_reference ? "demo-cases" : "demo-cases without-reference";
+      wrapper.appendChild(createCaseHeader(task));
 
       manifests[task.models[0]].forEach((item) => {
         const caseRow = document.createElement("div");
         caseRow.className = "case-row";
-        caseRow.appendChild(createCaseCell("Script", createScriptCell(item)));
+        caseRow.appendChild(createCaseCell(createScriptCell(item), "script-case"));
 
         const caseScroll = document.createElement("div");
         caseScroll.className = "case-scroll";
@@ -192,7 +219,7 @@
 
         if (task.show_reference) {
           const modelRoot = `${taskRoot}/${task.models[0]}`;
-          caseGrid.appendChild(createCaseCell("Reference", createReferenceCell(item, modelRoot)));
+          caseGrid.appendChild(createCaseCell(createReferenceCell(item, modelRoot)));
         }
 
         task.models.forEach((model) => {
@@ -201,7 +228,7 @@
           if (modelItem) {
             content.appendChild(createAudio(`${taskRoot}/${model}/${modelItem.output_audio}`));
           }
-          caseGrid.appendChild(createCaseCell(model, content));
+          caseGrid.appendChild(createCaseCell(content));
         });
 
         caseScroll.appendChild(caseGrid);

static/css/index.css

@@ -168,15 +168,42 @@ body {
 
 .demo-cases {
   display: grid;
-  gap: 0.8rem;
   padding: 0.9rem;
   background: var(--paper);
 }
 
-.case-row {
+.case-header {
   display: grid;
   grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
   border: 1px solid var(--line);
+  background: var(--soft);
+}
+
+.case-header-scroll {
+  overflow-x: auto;
+  border-left: 1px solid var(--line);
+}
+
+.case-header-cell {
+  min-width: 0;
+  border-right: 1px solid var(--line);
+  padding: 0.65rem 0.75rem;
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.case-header-cell:last-child {
+  border-right: 0;
+}
+
+.case-row {
+  display: grid;
+  grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  border-left: 1px solid var(--line);
   background: #fbfbfb;
 }
 
@@ -189,6 +216,7 @@ body {
   display: grid;
   grid-template-columns: 20rem repeat(var(--model-count), 20rem);
   min-width: max-content;
+  height: 100%;
 }
 
 .demo-cases.without-reference .case-grid {
@@ -196,6 +224,7 @@ body {
 }
 
 .case-cell {
+  display: flex;
   min-width: 0;
   border-right: 1px solid var(--line);
   background: var(--paper);
@@ -205,20 +234,17 @@ body {
   border-right: 0;
 }
 
-.case-cell-label {
-  border-bottom: 1px solid var(--line);
-  background: var(--soft);
-  padding: 0.55rem 0.75rem;
-  color: var(--ink);
-  font-size: 0.86rem;
-  font-weight: 700;
-  text-align: center;
-}
-
 .case-cell-body {
+  display: flex;
+  width: 100%;
+  align-items: center;
   padding: 0.85rem;
 }
 
+.script-case .case-cell-body {
+  align-items: flex-start;
+}
+
 .script-cell {
   max-height: 17rem;
   overflow: auto;
@@ -278,6 +304,10 @@ audio {
     grid-template-columns: 1fr;
   }
 
+  .case-header {
+    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
+  }
+
   .case-row {
     grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
   }