Skip to content

fix(frontend): scrollable main region + collapse long run prompts - #1258

Open
iagop03 wants to merge 1 commit into
HKUDS:mainfrom
iagop03:fix/rundetail-prompt-overflow
Open

fix(frontend): scrollable main region + collapse long run prompts#1258
iagop03 wants to merge 1 commit into
HKUDS:mainfrom
iagop03:fix/rundetail-prompt-overflow

Conversation

@iagop03

@iagop03 iagop03 commented Aug 30, 2026

Copy link
Copy Markdown

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

  1. Layout.tsx: <main> 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. This affects every routed page, not just run detail — a long-running task's page (or any tall content) could become partially unreachable.
  2. RunDetail.tsx: the header renders run.prompt in 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: add min-h-0 to <main>.
  • RunDetail.tsx: run.prompt now clamps to 3 lines by default (line-clamp-3) with a "show full prompt" / "show less" toggle button, collapsed by default.
  • New i18n keys runDetail.showFullPrompt / runDetail.showLessPrompt across all 7 locales.
  • Layout.test.tsx: regression assertion that <main> carries flex-1 min-h-0 overflow-auto.

Test Plan

  • npx tsc -b — clean.
  • Full frontend suite: npx vitest run --pool=threads — 594/596 passing; the 2 failures (options.test.ts ivLabel decimal-separator formatting, tearsheet.test.ts UTC-5 timezone-offset assumption) are pre-existing and locale/timezone-environment-dependent, unrelated to this change (reproduce identically on main).
  • Targeted: Layout.test.tsx + RunDetail.test.tsx — 16/16 passing.
  • Not tested against a live browser session manually; verified via the unit test's class assertions instead.

Checklist

  • No changes to protected areas (src/agent/, src/session/, src/providers/)
  • No hardcoded values
  • Follows CONTRIBUTING.md (DCO sign-off on the commit)
  • No user-facing docs needed — pure bugfix, no new config/flags/behavior to document

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant