fix(control-ui): make long /btw side results scrollable by SnoutFirst · Pull Request #101169 · openclaw/openclaw

SnoutFirst · 2026-07-06T20:04:46Z

What Problem This Solves

Long /btw side-result cards could grow beyond the desktop viewport, leaving later content inaccessible. The original CSS fix was sound, but its standalone browser test duplicated the established responsive fixture and initially bypassed the repository's Chromium capability guard.

Why This Change Was Made

Bound the side-result body on desktop and let that body scroll independently.
Preserve the mobile model, where the already-bounded fixed card is the single scroll owner.
Scope overflow and overscroll behavior to the vertical axis so the fix does not take ownership of horizontal content.
Consolidate coverage into chat-responsive.browser.test.ts and the existing typed full-chat fixture.
Prove actual scrolling by changing and observing scrollTop on the desktop body and mobile card, rather than checking CSS declarations alone.

User Impact

Desktop users can read the full result without the card escaping the viewport. Mobile users keep the existing full-card scrolling behavior. There are no configuration, protocol, or persisted-state changes.

Evidence

Exact head: 9d560b57d39ee70ffeba5974b96d9ee6b365cd42
Sanitized AWS Crabbox: cbx_a861210854a8, public networking, no Tailscale, no instance profile
Run: run_ade19c6e5b54
Environment: Linux x86_64, Node 24.15.0, pnpm 11.2.2, Playwright Chromium 149.0.7827.55 with Linux browser dependencies installed
Command: pnpm test ui/src/pages/chat/chat-responsive.browser.test.ts
Result: 55/55 browser tests passed, 0 skipped
Focused behavior: desktop BTW body is bounded and scrolls at 1024×768 and 1366×900; the 320×568 mobile card remains the scroll owner; both paths change scrollTop; no horizontal overflow
Fresh GPT-5.5 autoreview: no accepted/actionable findings; patch correctness confidence 0.86
Real behavior proof workflow: successful exact-head check
Exact-SHA CI release gate: run 28829693913

Contributor: @SnoutFirst

clawsweeper · 2026-07-06T20:57:17Z

Codex review: needs maintainer review before merge. Reviewed July 6, 2026, 7:23 PM ET / 23:23 UTC.

Summary
The PR caps and vertically scrolls .chat-side-result__body on desktop, resets body scrolling for the existing mobile card scroll model, and adds responsive browser assertions for long BTW side results.

PR surface: Source +9, Tests +51. Total +60 across 2 files.

Reproducibility: yes. source-reproducible. Current main renders arbitrary sanitized /btw markdown into a body with no desktop height or overflow cap, and the PR's 80-paragraph fixture is a concrete browser reproduction path even though I did not execute a current-main failing run.

Review metrics: none identified.

Merge readiness
Overall: 🦞 diamond lobster
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦞 diamond lobster
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Risk before merge

[P1] GitHub reports the PR as mergeable but behind, and the linked exact-SHA CI release gate was still in progress when checked; maintainers should refresh the merge result and wait for required checks before landing.

Maintainer options:

Decide the mitigation before merge
Land the focused CSS and responsive-test fix after normal merge-result refresh, keeping the side-result body as the desktop scroll owner and the mobile card as the mobile scroll owner.
Pause or close
Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

No ClawSweeper repair job is needed; the remaining action is routine maintainer landing with merge-result refresh and required exact-head checks.

Security
Cleared: The final diff is limited to Control UI CSS and browser-test code, with no dependency, workflow, secret, package, or code-execution surface added.

Review details

Best possible solution:

Land the focused CSS and responsive-test fix after normal merge-result refresh, keeping the side-result body as the desktop scroll owner and the mobile card as the mobile scroll owner.

Do we have a high-confidence way to reproduce the issue?

Yes, source-reproducible. Current main renders arbitrary sanitized /btw markdown into a body with no desktop height or overflow cap, and the PR's 80-paragraph fixture is a concrete browser reproduction path even though I did not execute a current-main failing run.

Is this the best way to solve the issue?

Yes. The PR fixes the presentation owner directly, preserves the existing mobile scroll model, and uses the established guarded responsive browser suite rather than a duplicate Playwright lifecycle.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against a89fe705b8b8.

Label changes

Label changes:

add proof: sufficient: Contributor real behavior proof is sufficient. Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.
add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.
add rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.

Label justifications:

P2: This fixes a bounded Control UI readability bug with limited blast radius and no config, protocol, persistence, auth, or security impact.
rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.
proof: sufficient: Contributor real behavior proof is sufficient. Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.
proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Sufficient: an inspected screenshot directly shows the long BTW card scrolled after the fix, and the exact-head real-behavior-proof workflow succeeded.

Evidence reviewed

PR surface:

Source +9, Tests +51. Total +60 across 2 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	1	9	0	+9
Tests	1	76	25	+51
Docs	0	0	0	0
Config	0	0	0	0
Generated	0	0	0	0
Other	0	0	0	0
Total	2	85	25	+60

What I checked:

Repository policy read: Root AGENTS.md and scoped ui/AGENTS.md were read; the review applied the repo requirement to inspect the full UI path and avoid changelog/release-note blockers for a normal PR. (AGENTS.md:1, d09e2e738c2e)
Current main still has the bug shape: At current main, .chat-side-result__body only sets font size and line height, so the desktop body has no local height cap or vertical overflow owner. (ui/src/styles/components.css:2218, a89fe705b8b8)
Runtime owner renders arbitrary BTW result text into that body: renderSideResult renders sanitized markdown into .chat-side-result__body, making the body CSS the narrow owner for containing long /btw output. (ui/src/pages/chat/components/chat-composer.ts:1011, a89fe705b8b8)
PR head fixes the owner directly: The PR adds max-height: min(55vh, 480px), overflow-y: auto, and contained vertical overscroll to the side-result body, then resets those rules in the mobile media query so the mobile card remains the scroll owner. (ui/src/styles/components.css:2218, 9d560b57d39e)
PR head tests the desktop and mobile invariants: The responsive browser suite now uses an 80-paragraph side-result fixture and asserts desktop body scrolling plus mobile card scrolling via observed scrollTop changes. (ui/src/pages/chat/chat-responsive.browser.test.ts:1672, 9d560b57d39e)
Latest release does not already ship this fix: The latest release tag v2026.6.11 also has .chat-side-result__body without the desktop max-height/overflow rules, so this PR is not obsolete against shipped behavior. (ui/src/styles/components.css:1984, e085fa1a3ffd)

Likely related people:

ngutman: Authored and merged the original /btw side-question work and the Control UI BTW side-result rendering PR that added the UI surface this PR adjusts. (role: feature owner; confidence: high; commits: 9aac55d30614, 57cff731463a; files: ui/src/styles/components.css, ui/src/ui/chat/side-result.ts, src/agents/btw.ts)
steipete: Recent Control UI test/style history and the live PR discussion show review/fixup work that removed the duplicate standalone browser lifecycle and strengthened the responsive-suite assertions. (role: recent area contributor and reviewer; confidence: high; commits: ddd2c2a60268, 52d929288fb1, 032e996c8b4b; files: ui/src/pages/chat/chat-responsive.browser.test.ts, ui/src/styles/components.css)
fuller-stack-dev: Merged the recent chat composer redesign touching the same composer, responsive browser test, and component style surfaces. (role: recent adjacent owner; confidence: medium; commits: 17d3c2eb0a80; files: ui/src/styles/components.css, ui/src/pages/chat/components/chat-composer.ts, ui/src/pages/chat/chat-responsive.browser.test.ts)

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Review history (3 earlier review cycles)

reviewed 2026-07-06T21:01:28.663Z sha 62e8f2c :: needs real behavior proof before merge. :: none
reviewed 2026-07-06T22:13:14.924Z sha f046898 :: needs changes before merge. :: [P1] Route the browser test out of browser mode
reviewed 2026-07-06T23:15:27.019Z sha 9d560b5 :: needs maintainer review before merge. :: none

SnoutFirst · 2026-07-06T21:48:04Z

Proof that the fix works.

Local Playwright run (1366x900 viewport, Chromium headless, installed via pnpm exec playwright install chromium):

overflow: auto
maxHeight: 480px
clientHeight: 480
scrollHeight: 4576
scrollable: true

Screenshot after scrolling the BTW side-result body to the bottom:

I also added a standalone lightweight browser test (ui/src/pages/chat/chat-side-result-scroll.browser.test.ts) that exercises the same behavior for desktop and mobile viewports without needing the full Control UI dev server. It bundles cleanly with esbuild.

Verification artifacts (script + screenshot + metrics) are on the throw-away branch SnoutFirst/openclaw@proof/control-ui-btw-scroll.

steipete · 2026-07-06T22:59:06Z

Maintainer fixup and verification complete at exact head 032e996c8b4b087ddad6e02a54bf02aee07d8efb.

Kept the CSS fix at the side-result presentation owner.
Removed the duplicate standalone Playwright lifecycle, which failed in a clean environment when Chromium was unavailable and then dereferenced an uninitialized browser during cleanup.
Consolidated desktop and mobile long-content assertions into the established guarded responsive suite.
Preserved release-note context and contributor credit in the PR body; the root changelog remains release-owned.
Sanitized AWS Crabbox cbx_00b59c1e8ab4, run run_eb2f7a08842e: pnpm test ui/src/pages/chat/chat-responsive.browser.test.ts — 55 passed, 0 skipped with real Chromium.
git diff --check passed.
Fresh maintainer-fixup and full-branch autoreviews: no accepted/actionable findings.

The PR body now contains the required problem, rationale, impact, and evidence sections. Land-ready from review.

The BTW side-result card in Control UI expanded to the full height of its content on desktop, so answers taller than the viewport couldn't be read. Constrain the result body with a max-height and overflow:auto so it scrolls in place, while keeping the existing mobile overlay behavior intact. - Add max-height/min(55vh,480px), overflow:auto, and overscroll-behavior:contain to .chat-side-result__body for non-mobile viewports. - Reset those rules inside the mobile media query so the whole card still scrolls as a fixed overlay. - Add a lightweight browser test that verifies the body is scrollable on desktop and the mobile overlay still scrolls as a whole.

steipete · 2026-07-06T23:26:27Z

Merged via squash.

Prepared head SHA: 9d560b57d39ee70ffeba5974b96d9ee6b365cd42
Landed commit: e5e721fdc5dec61397aab93841f948543c21feb4

steipete · 2026-07-06T23:26:32Z

Land-ready proof for exact head 9d560b57d39ee70ffeba5974b96d9ee6b365cd42:

Best-fix review: the desktop side-result body owns bounded vertical scrolling; the existing mobile fixed card remains the single mobile scroll owner. Overflow/overscroll changes are vertical-axis only, and the duplicate standalone fixture was consolidated into the existing responsive browser suite.
Exact-head live Chromium proof: sanitized AWS Crabbox cbx_a861210854a8, run run_ade19c6e5b54, Linux x86_64, Node 24.15.0, pnpm 11.2.2, Playwright Chromium 149.0.7827.55; pnpm test ui/src/pages/chat/chat-responsive.browser.test.ts; 55/55 passed, 0 skipped.
The browser tests prove actual scrolling by changing scrollTop on the desktop body at 1024x768 and 1366x900 and on the mobile card at 320x568; they also verify no horizontal overflow ownership.
Fresh GPT-5.5 autoreview: no accepted or actionable findings; correctness confidence 0.86.
Real behavior proof: run 28829491833, success.
Exact-SHA full CI release gate: run 28829693913, 110/110 completed successfully.
Exact-SHA Workflow Sanity: run 28829408733, rerun successful.
Native landing gate: OPENCLAW_TESTBOX=1 scripts/pr prepare-run 101169 passed using exact-head hosted evidence; changelog not required for this changed-file set.

Known gap: no screenshot was published because the interaction assertions exercise the real rendered browser fixture directly and no image upload was needed.

steipete · 2026-07-06T23:26:46Z

Merged via squash.

Prepared head SHA: 9d560b57d39ee70ffeba5974b96d9ee6b365cd42
Landed commit: e5e721fdc5dec61397aab93841f948543c21feb4

openclaw-barnacle Bot added app: web-ui App: web-ui size: S triage: needs-pr-context Candidate: external PR body lacks required problem context or evidence. labels Jul 6, 2026

SnoutFirst force-pushed the fix/control-ui-btw-scroll branch from 62e8f2c to f046898 Compare July 6, 2026 21:53

steipete self-assigned this Jul 6, 2026

openclaw-barnacle Bot removed the triage: needs-pr-context Candidate: external PR body lacks required problem context or evidence. label Jul 6, 2026

SnoutFirst and others added 3 commits July 7, 2026 00:00

test(ui): consolidate side-result scroll coverage

52d9292

chore: keep release notes in PR metadata

032e996

steipete requested a review from a team as a code owner July 6, 2026 23:01

steipete force-pushed the fix/control-ui-btw-scroll branch from 0316d2f to 032e996 Compare July 6, 2026 23:01

openclaw-barnacle Bot removed the docs Improvements or additions to documentation label Jul 6, 2026

test(ui): verify side-result scroll interactions

9d560b5

github-actions Bot mentioned this pull request Jul 7, 2026

📡 Upstream Digest — 2026-07-07 02:14 UTC curtismercier/openclaw-mods#1227

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(control-ui): make long /btw side results scrollable#101169

fix(control-ui): make long /btw side results scrollable#101169
steipete merged 4 commits into
openclaw:mainfrom
SnoutFirst:fix/control-ui-btw-scroll

SnoutFirst commented Jul 6, 2026 •

edited by steipete

Loading

Uh oh!

clawsweeper Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

SnoutFirst commented Jul 6, 2026 •

edited

Loading

Uh oh!

steipete commented Jul 6, 2026 •

edited

Loading

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

SnoutFirst commented Jul 6, 2026 • edited by steipete Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What Problem This Solves

Why This Change Was Made

User Impact

Evidence

Uh oh!

clawsweeper Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SnoutFirst commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

steipete commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

steipete commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SnoutFirst commented Jul 6, 2026 •

edited by steipete

Loading

clawsweeper Bot commented Jul 6, 2026 •

edited

Loading

SnoutFirst commented Jul 6, 2026 •

edited

Loading

steipete commented Jul 6, 2026 •

edited

Loading