Repository navigation
fix(workbench): cap editor and output panel heights so console stays in view - #28
Merged
Merged
Conversation
…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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The Workbench grid used
min-h-[300px] … lg:min-h-[520px]on both column wrappers — a minimum, not a cap. When a snippet was long enough to overflow the editor, the grid row grew unbounded and pushed the console output column down below the viewport, so results were hidden.Fix
Replace the unbounded minimum with a fixed cap on both panel wrappers:
min-h-[300px] lg:min-h-[520px]→h-[300px] lg:h-[520px]Inside the bounded box, existing scroll containers take over:
.cm-scrolleroverflow-autoconsole-log and loop-lane containersAlso lower
CodeEditorminHeight(220px→140pxmobile,440px→380pxdesktop) so the editor host fits inside the fixed column without clipping step-mode controls (replay bar, step description).LoopDiagram.tsxalready uses the correct bounded pattern (min-h-0 flex-1 … overflow-auto) and needed no change.Verification (Playwright, dev server)
520px. Long 45-line snippet: editor.cm-scrollerscrollHeight 1010 / clientHeight 448(scrolls internally); console log container1276/457(scrolls internally). Console output (value: 0…39,done, microtask, macrotask) fully visible inside the 520px panel after Run. Same in Performance/loop view; step-mode bars not clipped, replay bar + step description visible.300px, both scroll internally (editor1096/187, console1276/220after run)./embedstill renders with the backlink badge;mainscrolls to fit the Workbench inside the iframe.Checks
npm run typecheck— cleannpm run lint— 0 errors (8 pre-existing react-refresh warnings)npm test— 45 pass / 0 fail (1324 expects)npm run build— succeeds (client, SSR, prerender)