Skip to content

fix(ui): align Talk settings Voice/Model/Sensitivity controls vertically#96973

Closed
wm0018 wants to merge 1 commit into
openclaw:mainfrom
wm0018:fix/talk-settings-alignment
Closed

fix(ui): align Talk settings Voice/Model/Sensitivity controls vertically#96973
wm0018 wants to merge 1 commit into
openclaw:mainfrom
wm0018:fix/talk-settings-alignment

Conversation

@wm0018

@wm0018 wm0018 commented Jun 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What Problem This Solves

Fixes an issue where users who open the Talk settings panel in the Control UI webchat see the Voice, Model, and Sensitivity input fields vertically misaligned in the primary settings row. Model's <input> sits higher than Voice and Sensitivity's <select> elements, making the row look uneven.

Why This Change Was Made

Voice and Sensitivity are rendered via renderNativeTalkSelect() which emits a selectedLabel line above the <select>, creating a 3-row flex layout. Model is a plain <label> with only a label <span> and an <input>, creating a 2-row layout. Since all three are in the same CSS grid row, the shorter Model column leaves its <input> at the top while the taller columns push their <select> down by the extra label height.

Column DOM structure Rows
Voice [label] + [selectedLabel] + [select] 3
Model [label] + [input] 2
Sensitivity [label] + [selectedLabel] + [select] 3

The fix adds margin-top: auto to the last child of .agent-chat__talk-field, which pushes every input/select to the bottom of its flex container. Because the grid row height is driven by the tallest column, all control elements end up at the same vertical position.

.agent-chat__talk-field > :last-child {
  margin-top: auto;
}

This is preferred over adding a hidden spacer span because it is:

  • Generic — handles any future fields with uneven structure
  • Consistent — also fixes the same class of misalignment in the Advanced section (Exact VAD, Pause before send, Lead-in)
  • Minimal — 4 lines added, 0 lines deleted

Non-goal: this does not change any Talk settings behavior, values, callbacks, or mobile layout. It only fixes the visual alignment in the primary row.

User Impact

Users opening Talk settings will see Voice, Model, and Sensitivity controls aligned on the same horizontal row instead of the Model input sitting visibly higher. No functional changes — values, interactions, and accessibility labels are unaffected.

Evidence

  • All 119 existing unit tests pass (pnpm test ui/src/ui/views/chat.test.ts)
  • CSS-only change: 4 lines added to ui/src/styles/chat/layout.css
  • Uses margin-top: auto on flex last-child, a standard Flexbox alignment technique

Before — Model's <input> sits ~21px higher

┌──────────────────────────────────────────────────────┐
│ ┌─ Voice ───────┐ ┌─ Model ───────┐ ┌─ Sensitivity ┐ │
│ │ Voice         │ │ Model         │ │ Sensitivity   │ │
│ │ marin         │ │               │ │ Custom        │ │
│ │ [select    ▼] │ │ [input     ]← │ │ [select   ▼]  │ │
│ │               │ │   ↑ misalign  │ │               │ │
│ └───────────────┘ └───────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────┘

After — controls align at the same row

┌──────────────────────────────────────────────────────┐
│ ┌─ Voice ───────┐ ┌─ Model ───────┐ ┌─ Sensitivity ┐ │
│ │ Voice         │ │ Model         │ │ Sensitivity   │ │
│ │ marin         │ │               │ │ Custom        │ │
│ │ [select    ▼] │ │ [input     ]  │ │ [select   ▼]  │ │
│ └───────────────┘ └───────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────┘
image

Closes #96915

@clawsweeper

clawsweeper Bot commented Jun 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Thanks for the context here. I swept through the related work, and this is now duplicate or superseded.

Close as superseded: this CSS-only branch fixes the visible alignment, but #96925 is an open, clean, proof-positive candidate for the same linked bug and removes the redundant selected-label DOM at the source with focused test updates.

Canonical path: Land the cleaner source/test fix in #96925, then close the duplicate candidate branches and the linked alignment issue after merge.

So I’m closing this here and keeping the remaining discussion on #96925.

Review details

Best possible solution:

Land the cleaner source/test fix in #96925, then close the duplicate candidate branches and the linked alignment issue after merge.

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

Yes. Current main source renders Voice and Sensitivity with an extra selected-label line while Model has only label plus input, and the reporter/proof screenshots show the resulting visible row mismatch.

Is this the best way to solve the issue?

No. The CSS mitigation aligns the visible controls, but #96925 is the better landing path because it removes the redundant DOM that causes the mismatch and updates focused tests.

Security review:

Security review cleared: The diff changes only Control UI CSS and introduces no dependency, CI, permission, network, secret, package, or code-execution surface.

AGENTS.md: found and applied where relevant.

What I checked:

Likely related people:

  • vincentkoc: Commit metadata ties Vincent Koc to a821ea110bbe, which introduced the shared native Talk select helper with selected-label support in the affected chat view. (role: feature introducer; confidence: high; commits: a821ea110bbe; files: ui/src/ui/views/chat.ts)
  • alexzhu0: GitHub associates 85e5d486df11 with Render dashboard chat history incrementally #88685 by alexzhu0, and that commit touched the Talk settings render, layout, and tests while preserving the selected-label row. (role: affected refactor author; confidence: high; commits: 85e5d486df11; files: ui/src/ui/views/chat.ts, ui/src/styles/chat/layout.css, ui/src/ui/views/chat.test.ts)
  • shushushv: Commit d211d49011ba from fix(ui): populate realtime talk provider and transport options from talk.catalog #93746 updated realtime Talk provider and transport options in the same chat view and adjacent tests. (role: recent adjacent contributor; confidence: medium; commits: d211d49011ba; files: ui/src/ui/views/chat.ts, ui/src/ui/views/chat.test.ts)

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

@wm0018

wm0018 commented Jun 26, 2026

Copy link
Copy Markdown
Contributor Author

@clawsweeper re-review

@clawsweeper

clawsweeper Bot commented Jun 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. labels Jun 26, 2026
@clawsweeper

clawsweeper Bot commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

ClawSweeper applied the proposed close for this PR.

  • Action: closed this PR.
  • Close reason: duplicate or superseded.
  • Evidence: durable ClawSweeper review.
  • Coverage proof: PR B clearly covers PR A's core useful intent: it fixes the same Talk settings control alignment bug, addresses the underlying redundant DOM cause, and is identified by PR A's own durable report as the better canonical source/test fix. PR A's CSS-only implementation is an alternate mitigation, not independent work needing separate review. Covering PR: fix(ui): remove redundant selectedLabel rendering in Talk settings (#… #96925.

@clawsweeper clawsweeper Bot closed this Jun 26, 2026
This was referenced Jun 27, 2026
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

app: web-ui App: web-ui P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. size: XS status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: Talk settings style alignment issue

1 participant

@wm0018