From 3b5ce24acb65f7ff402453894c3e30cdafd6dc19 Mon Sep 17 00:00:00 2001
From: Koosha Paridehpour <42529354+KooshaPari@users.noreply.github.com>
Date: Mon, 14 Sep 2026 20:07:50 -0700
Subject: [PATCH] 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!
---
 .../playground/components/CompareColumn.tsx   |  2 +-
 .../playground/components/tabs/CompareTab.tsx |  2 +-
 ...ground-compare-column-scroll-13316.test.ts | 35 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/playground-compare-column-scroll-13316.test.ts

diff --git a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx b/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
index 4b4923356a..4b4950f843 100644
--- a/src/app/(dashboard)/dashboard/playground/components/CompareColumn.tsx
+++ b/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">
diff --git a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx b/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
index 55ade7edc3..ff9e1998de 100644
--- a/src/app/(dashboard)/dashboard/playground/components/tabs/CompareTab.tsx
+++ b/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))`,
         }}
diff --git a/tests/unit/playground-compare-column-scroll-13316.test.ts b/tests/unit/playground-compare-column-scroll-13316.test.ts
new file mode 100644
index 0000000000..9447c4f79c
--- /dev/null
+++ b/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|$)/);
+});