refactor(ui): unify chat icon buttons on one borderless design and align top chrome rows#104574
Conversation
openclaw-barnacle
Bot
added
app: web-ui
clawsweeper
Bot
added
rating: 🐚 platinum hermit
|
Codex review: needs maintainer review before merge. Reviewed July 11, 2026, 1:33 PM ET / 17:33 UTC. Summary PR surface: Source -5, Tests 0. Total -5 across 9 files. Reproducibility: not applicable. the PR addresses a source-visible visual inconsistency rather than a broken functional contract; current main clearly contains the two presentation variants. Review metrics: none identified. Merge readiness Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch. Rank-up moves:
Next step before merge
Security Review detailsBest possible solution: Keep one shared borderless 28px chat icon-button path with semantic action classes, row-level contrast treatment for floating controls, the existing responsive hiding rules, and host-owned macOS titlebar clearance. Do we have a high-confidence way to reproduce the issue? Not applicable: the PR addresses a source-visible visual inconsistency rather than a broken functional contract; current main clearly contains the two presentation variants. Is this the best way to solve the issue? Yes. Removing the layout variant parameter and centralizing sizing and chrome is the narrowest maintainable solution, while semantic selectors, action handlers, responsive behavior, badges, accessibility attributes, and native clearance remain with their existing owners. AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against e68669373280. Label changesLabel changes:
Label justifications:
Evidence reviewedPR surface: Source -5, Tests 0. Total -5 across 9 files. View PR surface stats
What I checked:
Likely related people:
What the crustacean ranks mean
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
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fc11616771
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| Sizing only — chrome stays ghost; .btn--icon's 36px min-width/height would | ||
| win otherwise. The floating row sits in the thread's reserved titlebar band | ||
| (never over content), so it needs no backdrop of its own. */ | ||
| .chat-icon-btn { |
There was a problem hiding this comment.
When these controls render in either the split-pane header or the floating toggle cluster, the callers now give them btn--ghost, and the global ghost button rule clears the border/background. This new .chat-icon-btn rule only restores sizing, so the floating buttons lose the per-button border/panel/shadow they had before and the pane header still doesn't get the compact boxed affordance this refactor is meant to unify on; put the boxed chrome on the shared rule or stop using the ghost variant for these buttons.
Useful? React with 👍 / 👎.
clawsweeper
Bot
added
the
proof: sufficient
steipete
changed the title
…ign top chrome rows (openclaw#104574) * refactor(ui): unify chat icon buttons on the compact boxed design * refactor(ui): keep chat icon buttons borderless and align top chrome rows
1 participant
What Problem This Solves
The Control UI chat surface rendered its session icon buttons in two different designs: split-pane headers used borderless ghost icons while the single-pane floating toggles used boxed buttons with a border, panel fill, and shadow. On top of that, the top chrome rows sat on three different centerlines — sidebar brand icons at y≈29, floating toggles at y≈24, pane-header actions at y≈18 — so the sidebar buttons never lined up with the buttons on the right.
Why This Change Was Made
Unify on one borderless compact icon-button design and one shared chrome centerline:
variant: "pane-header" | "floating"parameter is removed fromrenderSessionDiffToggle/renderBackgroundTasksToggle/renderSessionWorkspaceToggle; every chat icon button now rendersbtn btn--ghost btn--icon chat-icon-btn, with the per-variant chrome classes (chat-workspace-open,chat-tasks-open,chat-diff-open) deleted and one shared.chat-icon-btnsizing rule replacing the.chat-pane__actions .btn--iconoverride.--bg+ blur, no border/shadow) that is invisible over the empty titlebar band but keeps icons legible over text.User Impact
Sidebar header buttons, split-pane header actions, and the floating toggles now share one borderless design and one centerline across the top of the shell, in light and dark themes. No white boxed buttons in light mode. No behavior changes; all actions, badges, tooltips, and the narrow-viewport tasks-toggle hiding work as before. The macOS app's 50px titlebar clearance overrides are untouched.
Evidence
Verified in the mock dev harness (
pnpm dev:ui:mock), light and dark themes:getBoundingClientRect, Δ ≤ 0.5px).--bgwash and ghost hover states; no console errors.Test selectors that targeted the removed
chat-workspace-openclass now use the sharedchat-workspace-toggleclass (ui/src/e2e/chat-flow.e2e.test.ts,ui/src/pages/chat/chat-view.test.ts).