Skip to content

fix: truncate long model names in model selector to prevent overflow #6985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrubens merged 2 commits into from
Aug 12, 2025
Merged

fix: truncate long model names in model selector to prevent overflow #6985

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e27b6a
fix: truncate long model names in ModelPicker to prevent overflow
roomote Aug 12, 2025
cf7020e
Update webview-ui/src/components/settings/ModelPicker.tsx
mrubens Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions webview-ui/src/components/settings/ModelPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export const ModelPicker = ({
aria-expanded={open}
className="w-full justify-between"
data-testid="model-picker-button">
<div>{selectedModelId ?? t("settings:common.select")}</div>
<div className="truncate">{selectedModelId ?? t("settings:common.select")}</div>
Copy link
Contributor Author

@roomote roomote bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I notice we're using a <div> here but a <span> on line 197 for the same truncation purpose. Is this intentional? For consistency and semantic correctness (since this is inline text content), would it make sense to use <span> for both?

<ChevronsUpDown className="opacity-50" />
</Button>
</PopoverTrigger>
Expand Down Expand Up @@ -194,7 +194,7 @@ export const ModelPicker = ({
value={model}
onSelect={onSelect}
data-testid={`model-option-${model}`}>
{model}
<span className="truncate" title={model}>{model}</span>
<Check
className={cn(
"size-4 p-0.5 ml-auto",
Expand Down
Loading