fix(frontend): scrollable main region + collapse long run prompts - #1258
Open
iagop03 wants to merge 1 commit into
Open
fix(frontend): scrollable main region + collapse long run prompts#1258iagop03 wants to merge 1 commit into
iagop03 wants to merge 1 commit into
Conversation
Two related overflow bugs that only show up with tall content, so they were easy to miss with short prompts/pages: 1. <main> in Layout.tsx is a flex item (flex-1) inside a flex-col parent with overflow-hidden. Without min-h-0, a flex item's default min-height:auto lets it grow past its allotted space to fit tall content instead of respecting its own overflow-auto -- the excess then gets hard-clipped by the parent's overflow-hidden with no scrollbar at all, rather than scrolling into view. Affects every routed page, not just run detail. 2. RunDetail's header renders run.prompt in full, with no clamp. This header sits above the scrollable body, so a long multi-paragraph prompt (a real shape for this app -- users write structured strategy specs) pushes the actual dashboard/tabs mostly off-screen, leaving only a thin scrollable strip below it. Now clamped to 3 lines by default with a "show full prompt"/"show less" toggle. Signed-off-by: Iago Pueyo <iago.pueyo99@gmail.com>
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
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.
Summary
Two related overflow bugs, both invisible with short content and only surfacing once content gets tall — a long generated report, or a long user prompt.
Why
Layout.tsx:<main>is a flex item (flex-1) inside aflex-colparent withoverflow-hidden. Withoutmin-h-0, a flex item's defaultmin-height: autolets it grow past its allotted space to fit tall content instead of respecting its ownoverflow-auto— the excess then gets hard-clipped by the parent'soverflow-hidden, with no scrollbar at all, rather than scrolling into view. This affects every routed page, not just run detail — a long-running task's page (or any tall content) could become partially unreachable.RunDetail.tsx: the header rendersrun.promptin full, uncapped. That header sits above the scrollable body, so a long multi-paragraph prompt (a normal shape for this app — users write structured strategy specs) pushes the actual dashboard/tabs mostly off-screen, leaving only a thin scrollable strip below it.Changes
Layout.tsx: addmin-h-0to<main>.RunDetail.tsx:run.promptnow clamps to 3 lines by default (line-clamp-3) with a "show full prompt" / "show less" toggle button, collapsed by default.runDetail.showFullPrompt/runDetail.showLessPromptacross all 7 locales.Layout.test.tsx: regression assertion that<main>carriesflex-1 min-h-0 overflow-auto.Test Plan
npx tsc -b— clean.npx vitest run --pool=threads— 594/596 passing; the 2 failures (options.test.tsivLabeldecimal-separator formatting,tearsheet.test.tsUTC-5 timezone-offset assumption) are pre-existing and locale/timezone-environment-dependent, unrelated to this change (reproduce identically onmain).Layout.test.tsx+RunDetail.test.tsx— 16/16 passing.Checklist
src/agent/,src/session/,src/providers/)