fix(playground): allow Compare columns to scroll independently (#13532)

Playground Compare columns scroll independently. Each column root is a bounded flex column (`min-h-0 overflow-hidden`), and the grid clips only horizontally (`overflow-x-hidden min-h-0`), so a long answer in one column no longer drags the whole comparison (#13316).

Maintainer addition: `tests/unit/playground-compare-column-scroll-13316.test.ts`, a source-level guard in the same style as the other layout guards, pins both class sets (fails on the release tip).

Validated in one consolidated batch of this series (37 PRs boarded together on `release/v3.8.51`): `typecheck:core`, `check:open-sse-typecheck` and `check:dashboard-typecheck` clean; ESLint clean on every changed file; file-size, complexity, cognitive-complexity, changelog-integrity, docs-counts, docs-sync and migration-numbering gates green (only the pre-existing `open-sse/utils/stream.ts` file-size red remains, inherited from the base); 3,743 focused `node:test` cases plus 34 vitest cases green.

Thanks @KooshaPari!

src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx

@@ -33,7 +33,7 @@ export default function CompareColumn({ column, onCancel, onRemove }: CompareCol
   const { id, model, status, metrics, response, errorMessage } = column;
 
   return (
-    <div className="flex flex-col h-full border-r border-border last:border-r-0 min-w-0">
+    <div className="flex flex-col h-full border-r border-border last:border-r-0 min-w-0 min-h-0 overflow-hidden">
       {/* Column header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border bg-bg-alt shrink-0">
         <div className="flex items-center gap-2 min-w-0">

src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx

@@ -417,7 +417,7 @@ export default function CompareTab({ configState }: CompareTabProps) {
 
       {/* Columns area */}
       <div
-        className="flex-1 grid overflow-hidden"
+        className="flex-1 grid overflow-x-hidden min-h-0"
         style={{
           gridTemplateColumns: `repeat(${Math.max(columns.length, 1)}, minmax(0, 1fr))`,
         }}

tests/unit/playground-compare-column-scroll-13316.test.ts

@@ -0,0 +1,35 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// #13316: a long response in one Compare column scrolled the whole grid. Each column
+// must be its own bounded flex container (min-h-0 + overflow-hidden) and the grid must
+// not clip vertically, so every column's body scrolls independently.
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const componentsDir = join(
+  root,
+  "src",
+  "app",
+  "(dashboard)",
+  "dashboard",
+  "playground",
+  "components"
+);
+
+test("#13316 Compare column root is a bounded, clipped flex column", () => {
+  const src = readFileSync(join(componentsDir, "CompareColumn.tsx"), "utf8");
+  const rootClass = src.match(/<div className="(flex flex-col h-full[^"]*)"/)?.[1] ?? "";
+  assert.match(rootClass, /\bmin-h-0\b/);
+  assert.match(rootClass, /\boverflow-hidden\b/);
+});
+
+test("#13316 Compare grid clips horizontally only and can shrink", () => {
+  const src = readFileSync(join(componentsDir, "tabs", "CompareTab.tsx"), "utf8");
+  const gridClass = src.match(/className="(flex-1 grid[^"]*)"/)?.[1] ?? "";
+  assert.match(gridClass, /\bmin-h-0\b/);
+  assert.match(gridClass, /\boverflow-x-hidden\b/);
+  assert.doesNotMatch(gridClass, /(^|\s)overflow-hidden(\s|$)/);
+});