Add per-case horizontal scrolling

index.html

@@ -156,53 +156,55 @@
       }[char]));
     }
 
+    function createCaseCell(label, content) {
+      const cell = document.createElement("div");
+      cell.className = "case-cell";
+
+      const heading = document.createElement("div");
+      heading.className = "case-cell-label";
+      heading.textContent = label;
+
+      const body = document.createElement("div");
+      body.className = "case-cell-body";
+      if (content) {
+        body.appendChild(content);
+      }
+
+      cell.appendChild(heading);
+      cell.appendChild(body);
+      return cell;
+    }
+
     function renderTable(task, manifests, taskRoot) {
       const wrapper = document.createElement("div");
-      wrapper.className = "demo-table";
-      const table = document.createElement("table");
-      const thead = document.createElement("thead");
-      const tbody = document.createElement("tbody");
-      const header = document.createElement("tr");
-      const columns = task.show_reference ? ["Script", "Reference", ...task.models] : ["Script", ...task.models];
-      table.className = task.show_reference ? "" : "without-reference";
-
-      columns.forEach((column) => {
-        const th = document.createElement("th");
-        th.textContent = column;
-        header.appendChild(th);
-      });
-
-      thead.appendChild(header);
-      table.appendChild(thead);
+      wrapper.className = task.show_reference ? "demo-cases" : "demo-cases without-reference";
 
       manifests[task.models[0]].forEach((item) => {
-        const row = document.createElement("tr");
-        const scriptCell = document.createElement("td");
-
-        scriptCell.appendChild(createScriptCell(item));
-        row.appendChild(scriptCell);
+        const caseScroll = document.createElement("div");
+        caseScroll.className = "case-scroll";
+        const caseGrid = document.createElement("div");
+        caseGrid.className = "case-grid";
+        caseGrid.style.setProperty("--model-count", task.models.length);
+        caseGrid.appendChild(createCaseCell("Script", createScriptCell(item)));
 
         if (task.show_reference) {
-          const referenceCell = document.createElement("td");
           const modelRoot = `${taskRoot}/${task.models[0]}`;
-          referenceCell.appendChild(createReferenceCell(item, modelRoot));
-          row.appendChild(referenceCell);
+          caseGrid.appendChild(createCaseCell("Reference", createReferenceCell(item, modelRoot)));
         }
 
         task.models.forEach((model) => {
           const modelItem = manifests[model].find((entry) => entry.utt === item.utt);
-          const td = document.createElement("td");
+          const content = document.createElement("div");
           if (modelItem) {
-            td.appendChild(createAudio(`${taskRoot}/${model}/${modelItem.output_audio}`));
+            content.appendChild(createAudio(`${taskRoot}/${model}/${modelItem.output_audio}`));
           }
-          row.appendChild(td);
+          caseGrid.appendChild(createCaseCell(model, content));
         });
 
-        tbody.appendChild(row);
+        caseScroll.appendChild(caseGrid);
+        wrapper.appendChild(caseScroll);
       });
 
-      table.appendChild(tbody);
-      wrapper.appendChild(table);
       return wrapper;
     }
 

static/css/index.css

@@ -166,72 +166,51 @@ body {
   line-height: 1.5;
 }
 
-.demo-table {
-  overflow-x: auto;
-  border: 0;
-  background: var(--paper);
-}
-
-.demo-table table {
-  width: 100%;
-  min-width: 1380px;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.demo-table th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  border-bottom: 1px solid var(--line);
-  background: var(--soft);
-  font-size: 0.9rem;
-  font-weight: 700;
-  text-align: center;
-}
-
-.demo-table th,
-.demo-table td {
-  width: 18%;
-  border-right: 1px solid var(--line);
+.demo-cases {
+  display: grid;
+  gap: 0.8rem;
   padding: 0.9rem;
-  vertical-align: top;
+  background: var(--paper);
 }
 
-.demo-table th:first-child,
-.demo-table td:first-child {
-  width: 28%;
+.case-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  background: #fbfbfb;
 }
 
-.demo-table table.without-reference {
-  min-width: 1500px;
+.case-grid {
+  display: grid;
+  grid-template-columns: 28rem 20rem repeat(var(--model-count), 20rem);
+  min-width: max-content;
 }
 
-.demo-table table.without-reference th:first-child,
-.demo-table table.without-reference td:first-child {
-  width: 25%;
+.demo-cases.without-reference .case-grid {
+  grid-template-columns: 30rem repeat(var(--model-count), 20rem);
 }
 
-.demo-table table.without-reference th,
-.demo-table table.without-reference td {
-  width: 15%;
+.case-cell {
+  min-width: 0;
+  border-right: 1px solid var(--line);
+  background: var(--paper);
 }
 
-.demo-table th:last-child,
-.demo-table td:last-child {
+.case-cell:last-child {
   border-right: 0;
 }
 
-.demo-table tr {
+.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;
 }
 
-.demo-table tbody tr:nth-child(odd) {
-  background: #fbfbfb;
-}
-
-.demo-table tbody tr:last-child {
-  border-bottom: 0;
+.case-cell-body {
+  padding: 0.85rem;
 }
 
 .script-cell {