fix(ui): restore chat-new-messages class on scroll pill button by Astro-Han · Pull Request #44856 · openclaw/openclaw

Astro-Han · 2026-03-13T08:11:50Z

Note

AI-assisted (Claude Code). Testing level: fully tested — pnpm build, pnpm check, pnpm test all pass locally (913/913 test files passed; 2 unrelated jsdom env errors in app-chat.test.ts). codex review --base origin/main passed with no blocking issues. Author understands the change.

Summary

Problem: The "New messages" scroll-to-bottom button in the Dashboard chat UI renders its SVG icon at full container size, covering the entire chat area.
Why it matters: The button is completely unusable and blocks the chat UI for all Control UI / webchat users.
What changed: Restored the CSS class from agent-chat__scroll-pill (introduced in feat(ui): dashboard-v2 views refactor (slice 3/3 of dashboard-v2) #41503) back to chat-new-messages, which matches the existing styles in ui/src/styles/chat/layout.css:104-139.
What did NOT change (scope boundary): No CSS changes, no new classes, no SVG changes. One-line class name fix only.

Change Type (select all)

Bug fix

Scope (select all touched areas)

UI / DX

Linked Issue/PR

User-visible / Behavior Changes

The "New messages" scroll pill renders as a compact floating pill button instead of a full-screen SVG overlay.

Security Impact (required)

New permissions/capabilities? No
Secrets/tokens handling changed? No
New/changed network calls? No
Command/tool execution surface changed? No
Data access scope changed? No

Repro + Verification

Environment

OS: Any (web UI)
Runtime/container: Gateway dashboard / Control UI

Steps

Open the OpenClaw Dashboard (Control UI)
Scroll up in a chat session so the "New messages" button appears
Observe the button renders as a small pill

Expected

Small floating pill button with a 16x16 down-arrow icon

Actual (before fix)

SVG icon stretches to fill the entire chat panel

Evidence

Trace/log snippets

Root cause: PR #41503 (f76a3c5225) changed class="btn chat-new-messages" to class="agent-chat__scroll-pill", but no CSS rule exists for .agent-chat__scroll-pill. The existing .chat-new-messages styles (including svg { width: 16px; height: 16px }) never applied, leaving the SVG unconstrained.

Human Verification (required)

Verified scenarios: pnpm build + pnpm check + pnpm test (913/913 passed). codex review --base origin/main passed (no blocking issues). Confirmed agent-chat__scroll-pill has zero CSS matches; chat-new-messages has full styling at layout.css:104-139.
Edge cases checked: Grep confirms no other references to agent-chat__scroll-pill in styles or JS.
What you did not verify: Visual browser rendering (no UI test environment available).

Review Conversations

I replied to or resolved every bot review conversation I addressed in this PR.
I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

Backward compatible? Yes
Config/env changes? No
Migration needed? No

Failure Recovery (if this breaks)

How to disable/revert this change quickly: Revert the single line in ui/src/ui/views/chat.ts
Files/config to restore: ui/src/ui/views/chat.ts
Known bad symptoms reviewers should watch for: Scroll pill not appearing or unstyled

Risks and Mitigations

None.

greptile-apps · 2026-03-13T08:12:53Z

Greptile Summary

This PR restores the correct CSS class (chat-new-messages) on the "New messages" scroll-to-bottom pill button in the chat view, reverting a regression introduced in PR #41503 that replaced it with agent-chat__scroll-pill — a class that has no corresponding CSS rules.

Root cause confirmed: A grep of the entire ui/ directory finds zero occurrences of agent-chat__scroll-pill in any CSS file, meaning the SVG icon and button were completely unstyled, causing the SVG to expand to fill the full container.
Fix is correct: chat-new-messages is fully defined at ui/src/styles/chat/layout.css:104-139, including svg { width: 16px; height: 16px } that pins the icon to the intended compact size, and also appears in ui/src/styles/components.css:2229.
Scope is minimal: Only the single class attribute on the <button> element is changed; no CSS, no SVG, no event handlers, and no other logic is touched.

Confidence Score: 5/5

This PR is safe to merge — it is a minimal, well-scoped one-line bug fix with no side effects.
The change is a single class attribute restoration that directly maps to existing, verified CSS rules. There are no logic changes, no new dependencies, and grep confirms agent-chat__scroll-pill has no CSS definitions anywhere in the repo, validating both the bug and the fix. Risk of regression is negligible.
No files require special attention.

_{Last reviewed commit: 121ecfe}

altaywtf · 2026-03-13T19:03:06Z

Merged via squash.

Prepared head SHA: 621ef634a49bc55ff52e0d0adbcdd1d23c5949fa
Merge commit: 96c48f55665b8054470d25abcb6c86d097c741a8

Thanks @Astro-Han!

@altaywtf

…law#44856) Merged via squash. Prepared head SHA: 621ef63 Co-authored-by: Astro-Han <[email protected]> Co-authored-by: altaywtf <[email protected]> Reviewed-by: @altaywtf

@altaywtf

…law#44856) Merged via squash. Prepared head SHA: 621ef63 Co-authored-by: Astro-Han <[email protected]> Co-authored-by: altaywtf <[email protected]> Reviewed-by: @altaywtf

@altaywtf

…law#44856) Merged via squash. Prepared head SHA: 621ef63 Co-authored-by: Astro-Han <[email protected]> Co-authored-by: altaywtf <[email protected]> Reviewed-by: @altaywtf

openclaw-barnacle bot added app: web-ui App: web-ui size: XS labels Mar 13, 2026

Amateur0x1 mentioned this pull request Mar 13, 2026

[Bug] WebUI Settings page search icon misaligned/rendered incorrectly #44861

Open

altaywtf self-assigned this Mar 13, 2026

altaywtf force-pushed the worktree-fix-scroll-pill-class branch 2 times, most recently from 4aff2e7 to 691632b Compare March 13, 2026 18:54

Astro-Han and others added 3 commits March 13, 2026 22:02

fix(ui): restore chat-new-messages class on scroll pill button

d6abbae

fix: add changelog for dashboard new-messages pill

ba4c142

fix: move changelog entry to fixes tail

621ef63

altaywtf force-pushed the worktree-fix-scroll-pill-class branch from 691632b to 621ef63 Compare March 13, 2026 19:02

altaywtf merged commit 96c48f5 into openclaw:main Mar 13, 2026
18 of 27 checks passed

scotthuang mentioned this pull request Mar 14, 2026

fix: reuse chat-new-messages style for scroll-pill button #45379

Closed

18 tasks

github-actions bot mentioned this pull request Mar 15, 2026

📢 OpenClaw 新版本发布: v2026.3.13-1 xianyu110/awesome-openclaw-tutorial#32

Open

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): restore chat-new-messages class on scroll pill button#44856

fix(ui): restore chat-new-messages class on scroll pill button#44856
altaywtf merged 3 commits intoopenclaw:mainfrom
Astro-Han:worktree-fix-scroll-pill-class

Astro-Han commented Mar 13, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Mar 13, 2026

Uh oh!

Uh oh!

altaywtf commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Astro-Han commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

User-visible / Behavior Changes

Security Impact (required)

Repro + Verification

Environment

Steps

Expected

Actual (before fix)

Evidence

Human Verification (required)

Review Conversations

Compatibility / Migration

Failure Recovery (if this breaks)

Risks and Mitigations

Uh oh!

greptile-apps bot commented Mar 13, 2026

Greptile Summary

Confidence Score: 5/5

Uh oh!

Uh oh!

altaywtf commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Astro-Han commented Mar 13, 2026 •

edited

Loading