fix(web): cap Execution-mode model picker width so it reads as a dropdown (#4443)

[maxmilian]

Problem

In Settings → Execution mode → (a CLI card), the model selector renders edge-to-edge across the card with the chevron stranded at the far-right edge and a large empty gap in between — so it reads like an unfinished text input rather than a deliberate dropdown control (#4443).

What users will see

In Settings → Execution mode, each CLI card's model selector now renders as a compact dropdown capped at a sensible width, with the selected model name and its chevron grouped together — instead of stretching the full width of the card and looking like an unfinished text input. Nothing else changes: no new setting, no default change, no behavioral difference — this is a visual-only polish of the existing control, matching how the BYOK picker already looks.

Root cause

The picker (SearchableModelSelect) is styled with inline-switcher__select + settings-model-select, both width: 100%, and the Execution-mode card (.agent-card-config) never constrains it. The BYOK picker already caps itself via .settings-model-select--byok { min-width: min(420px, 100%) }; the Execution-mode card had no equivalent.

Fix

Cap .agent-card-config .agent-model-select-wrap at max-width: 420px, mirroring the BYOK precedent, so the selected model name and chevron stay grouped. The cap is on the shared wrapper, so it applies to both the loaded button and the sign-in loading row.

CSS-only, scoped to .agent-card-config — no TSX changes, BYOK and other selects untouched.

Surface area

• UI — visual cap on the existing Execution-mode model selector in apps/web Settings (no new control; existing control restyled to read as a dropdown)
• Keyboard shortcut — new or changed
• CLI / env var — new od subcommand or flag, new tools-dev / tools-pack / tools-pr flag, or new OD_* env var
• API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
• Extension point — new entry under skills/, design-systems/, design-templates/, or craft/, or change to the skills protocol
• i18n keys — added new translation keys
• New top-level dependency — adding any new entry to the root package.json
• Default behavior change — changes what existing users experience without opting in (default model, default setting, file/SQLite schema, auto-network on startup, auto-install)
• None — internal refactor, docs, tests, or translation update only

Screenshots

Before: full-width, looks like an empty input · After: capped 420px, reads as a dropdown.

Bug fix verification

• Test path that reproduces the bug: apps/web/tests/styles/settings-polish.test.ts
• Did the test go red on main and green on this branch? yes — without the .agent-card-config .agent-model-select-wrap cap the assertion fails (Missing CSS block for .agent-card-config .agent-model-select-wrap); with the rule it passes.
• Note on approach: the bug is pure layout (a missing width cap), so the falsifiable spec is a CSS-rule assertion rather than a pixel-level behavioral e2e — a rendered repro of a static width cap wasn't cheap to encode at the unit layer. It is paired with before/after renders produced headlessly from the card's verbatim CSS rules (screenshots above) as the visual evidence.

Validation

• pnpm vitest run tests/components/SettingsDialog.execution.test.tsx tests/styles/ → 149 passed
• tsc -b --noEmit → exit 0
• Before/after rendered headlessly from the card's verbatim CSS rules (screenshots above).

Fixes #4443

[lefarcen]

Hey @maxmilian! 👋

Thanks for picking this up — mirroring the BYOK width cap for the Execution-mode picker looks like the right direction for #4443.

Since this PR is still in draft, we'll stay out of your way until you mark it ready for review.

[PerishCode]

@maxmilian I reviewed the scoped CSS and style-test changes for the Execution-mode model picker. The wrapper-level cap applies to the searchable picker and loading row while staying scoped away from BYOK selectors, and the live PR checks include passing Web workspace tests and settings-workspace visual coverage. Nice focused fix for #4443.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

[lefarcen]

Hey @maxmilian — this looks close.

Quick merge-process note: because this changes a user-visible Settings control, I’ve marked it for QA validation before merge, so please hold off self-merging for now.

Also, could you add the last few PR-body details before this lands: a short What users will see note, the relevant Surface area checkbox, and an explicit Bug fix verification note? The screenshots and existing verification are already helpful — this just makes the final handoff clearer.

[maxmilian]

Thanks @lefarcen — done. I've filled in the missing PR-body sections:

• What users will see — framed from the Settings UI, calling out that it's a visual-only polish (no new setting / no default change).
• Surface area — checked UI (existing Execution-mode model selector restyled; the before/after entry-point screenshots are attached under Screenshots).
• Bug fix verification — test path (apps/web/tests/styles/settings-polish.test.ts), red-on-main → green-on-branch confirmed, plus a note that since the bug is a pure layout cap the falsifiable spec is a CSS-rule assertion paired with the headless before/after renders.

Understood on the process — I'll hold off self-merging and leave this for QA validation. Happy to make any tweaks if QA turns something up.

[lefarcen]

Thanks for turning that around so quickly — the PR body is clear now, and the bug-fix verification section is exactly what we needed.

From my side there’s nothing else to tweak in the description. The remaining process gate is the existing design → QA handoff before merge.