From cdaef6cece141ce4403105c91408b7aed4064f68 Mon Sep 17 00:00:00 2001
From: hoce1n <monkeycode-ai@chaitin.com>
Date: Mon, 10 Aug 2026 14:14:22 +0000
Subject: [PATCH] fix(workbench): cap editor and output panel heights so
 console stays in view

Replaces the unbounded min-height on the editor and output column
wrappers with a fixed cap (h-[300px] lg:h-[520px]). A long snippet no
longer stretches the grid row and pushes the console output out of the
viewport; each panel now scrolls internally via the CodeMirror scroller
and the overflow-auto log/lane containers. The CodeEditor minHeight is
lowered (220px->140px mobile, 440px->380px desktop) so the editor host
fits inside the fixed box without clipping step-mode controls.
Co-authored-by: monkeycode-ai <monkeycode-ai@chaitin.com>
---
 src/components/devtools/Workbench.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/devtools/Workbench.tsx b/src/components/devtools/Workbench.tsx
index 4b2ee8b..f2f3905 100644
--- a/src/components/devtools/Workbench.tsx
+++ b/src/components/devtools/Workbench.tsx
@@ -132,7 +132,7 @@ export default function Workbench({ code, onCodeChange, view }: Props) {
   return (
     <div className="grid gap-px overflow-hidden rounded-sm border border-border bg-border lg:grid-cols-2">
       {/* editor column */}
-      <div className="flex min-h-[300px] flex-col bg-card lg:min-h-[520px]">
+      <div className="flex h-[300px] flex-col bg-card lg:h-[520px]">
         <div className="flex flex-wrap items-center gap-2 border-b border-border bg-panel px-3 py-2">
           <button
             onClick={handleRun}
@@ -236,7 +236,7 @@ export default function Workbench({ code, onCodeChange, view }: Props) {
               onChange={onCodeChange}
               onRun={handleRun}
               activeLine={state.currentLine ?? null}
-              minHeight={isMobile ? "220px" : "440px"}
+              minHeight={isMobile ? "140px" : "380px"}
             />
           </Suspense>
         </div>
@@ -318,7 +318,7 @@ export default function Workbench({ code, onCodeChange, view }: Props) {
       </div>
 
       {/* output column */}
-      <div className="flex min-h-[300px] flex-col bg-card lg:min-h-[520px]">
+      <div className="flex h-[300px] flex-col bg-card lg:h-[520px]">
         <div className="flex items-center gap-2 border-b border-border bg-panel px-3 py-2 text-xs text-muted-foreground">
           {view === "console" ? <Terminal className="size-3.5" /> : <Zap className="size-3.5" />}
           {view === "console" ? "Console output" : "Event loop — live instrumentation"}