CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-27 12:13:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 13

📐 fix: Size the Model Picker to Its Content (#14859)

Browse source 
The header trigger was w-full inside a max-w-md wrapper, so it rendered
as a fixed 448px pill no matter how short the model name was. Let the
wrapper shrink-wrap the button and cap it at 60vw (20rem from sm up), so
the pill hugs its label and long names truncate instead of claiming the
whole row.
This commit is contained in:
Marco Beretta 2026-08-15 06:21:36 +02:00 • committed by GitHub
parent 8d99fd16fc
commit 73812adca1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
View file

@ -72,7 +72,7 @@ function ModelSelectorContent() {
<button
data-testid="model-selector-button"
aria-keyshortcuts={modelSelectorAriaKey}
className="my-1 flex h-9 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
className="my-1 flex h-9 max-w-full items-center gap-2 rounded-xl border border-border-light bg-presentation px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
aria-label={localize('com_ui_select_model')}
>
{selectedIcon && React.isValidElement(selectedIcon) && (
@ -80,14 +80,14 @@ function ModelSelectorContent() {
{selectedIcon}
</div>
)}
<span className="flex-grow truncate text-left">{selectedDisplayValue}</span>
<span className="truncate text-left">{selectedDisplayValue}</span>
</button>
}
/>
);
return (
<div className="relative flex w-full max-w-md flex-col items-center gap-2">
<div className="relative flex min-w-0 max-w-[60vw] flex-col items-center gap-2 sm:max-w-xs">
<Menu
values={selectedValues}
onValuesChange={(values: Record<string, any>) => {