Keep script fixed while scrolling audio

index.html

@@ -180,12 +180,15 @@
       wrapper.className = task.show_reference ? "demo-cases" : "demo-cases without-reference";
 
       manifests[task.models[0]].forEach((item) => {
+        const caseRow = document.createElement("div");
+        caseRow.className = "case-row";
+        caseRow.appendChild(createCaseCell("Script", createScriptCell(item)));
+
         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 modelRoot = `${taskRoot}/${task.models[0]}`;
@@ -202,7 +205,8 @@
         });
 
         caseScroll.appendChild(caseGrid);
-        wrapper.appendChild(caseScroll);
+        caseRow.appendChild(caseScroll);
+        wrapper.appendChild(caseRow);
       });
 
       return wrapper;

static/css/index.css

@@ -173,20 +173,26 @@ body {
   background: var(--paper);
 }
 
-.case-scroll {
-  overflow-x: auto;
+.case-row {
+  display: grid;
+  grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
   border: 1px solid var(--line);
   background: #fbfbfb;
 }
 
+.case-scroll {
+  overflow-x: auto;
+  border-left: 1px solid var(--line);
+}
+
 .case-grid {
   display: grid;
-  grid-template-columns: 28rem 20rem repeat(var(--model-count), 20rem);
+  grid-template-columns: 20rem repeat(var(--model-count), 20rem);
   min-width: max-content;
 }
 
 .demo-cases.without-reference .case-grid {
-  grid-template-columns: 30rem repeat(var(--model-count), 20rem);
+  grid-template-columns: repeat(var(--model-count), 20rem);
 }
 
 .case-cell {
@@ -271,4 +277,8 @@ audio {
   .task-directory {
     grid-template-columns: 1fr;
   }
+
+  .case-row {
+    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
+  }
 }