web: agent/model dropdown truncates full model names instead of showing complete text #20968

Description

The agent and model selector dropdowns truncate model names with ellipsis, making it impossible to distinguish between similarly-named models (e.g., "claude-sonnet-4-2025..." vs "claude-sonnet-4-2026..."). This affects both the trigger button and the dropdown list items.

Root cause — multiple truncation constraints:

1. Agent selector (prompt-input.tsx):

<Select
  class="capitalize max-w-[160px] text-text-base"        // ← 160px hard limit
  valueClass="truncate text-13-regular text-text-base"    // ← truncate class
/>

2. Model selector trigger (prompt-input.tsx):

<Button class="min-w-0 max-w-[320px] text-13-regular text-text-base group">
  <span class="truncate">                                 // ← truncates display
    {local.model.current()?.name}
  </span>
</Button>

3. Model selector dropdown list (dialog-select-model.tsx, line ~77):

<span class="truncate">{i.name}</span>                    // ← truncates in popup too

The TailwindCSS truncate utility sets overflow: hidden; text-overflow: ellipsis; white-space: nowrap. Combined with max-w-[160px] / max-w-[320px], longer model names are cut off even in the dropdown where there's plenty of room.

Expected behavior:

• The trigger button can truncate (space is limited) — but should show the full name in a tooltip on hover/long-press
• The dropdown list should show full model names without truncation — users need to read and distinguish between models
• On mobile, consider showing provider + model name on separate lines in the dropdown

Proposed fix for dropdown list:

// dialog-select-model.tsx — remove truncate from list items
<span class="break-words">{i.name}</span>

Plugins

No response

OpenCode version

Latest (dev branch)

Steps to reproduce

1. Open OpenCode web UI
2. Click the model selector dropdown in the bottom toolbar
3. Observe: model names like "claude-sonnet-4-20250514" or "gpt-4o-2025-03-15" are truncated with "..."
4. Try to distinguish between models with similar name prefixes
5. Also observe: the agent selector truncates agent names at 160px

Screenshot and/or share link

No response

Operating System

Any — more prominent on mobile due to smaller viewport

Terminal

Any browser