lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix model dropdown name clipping

Browse Source
This commit is contained in:
134 2026-06-12 21:44:10 +08:00
parent 1b79f788b5
commit 686111628e
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/canvas/CanvasChatPanel.tsx
View File

@ -8363,13 +8363,13 @@ export function CanvasChatPanel({
const renderModelSelectContent = () => (
<SelectContent
className={cn(
"w-[170px] max-h-[320px] overflow-hidden rounded-[14px] border border-[#cfd4dc] bg-white p-0 text-[#252b33] shadow-[0_18px_44px_rgba(15,23,42,0.16)]",
"w-[360px] max-w-[calc(100vw-32px)] max-h-[420px] overflow-hidden rounded-[22px] border border-[#cfd4dc] bg-white p-0 text-[#252b33] shadow-[0_18px_44px_rgba(15,23,42,0.16)]",
isVideoWorkspace
? "rounded-[14px] border border-border/60 bg-background/95 shadow-[0_14px_30px_-20px_rgba(15,23,42,0.35)] backdrop-blur-xl"
? "border border-border/60 bg-background/95 shadow-[0_14px_30px_-20px_rgba(15,23,42,0.35)] backdrop-blur-xl"
: "dark:border-white/10 dark:bg-zinc-900/95 dark:text-zinc-100"
)}
>
<div className="max-h-[304px] space-y-0.5 overflow-y-auto p-1.5">
<div className="max-h-[392px] space-y-1 overflow-y-auto p-2">
{selectableModels.map((model) => {
const discountLabel = getImageModelCreditDiscountLabel(
model.imageGenConfig
@ -8381,7 +8381,7 @@ export function CanvasChatPanel({
value={model.id}
disabled={model.selectable === false}
className={cn(
"h-8 rounded-[10px] px-2 text-[13px] font-medium [&>span:first-child]:hidden [&>span:last-child]:block [&>span:last-child]:w-full",
"h-12 rounded-[14px] px-4 text-[17px] font-medium [&>span:first-child]:hidden [&>span:last-child]:block [&>span:last-child]:w-full",
isVideoWorkspace
? "text-foreground focus:bg-background focus:text-foreground data-[state=checked]:bg-background data-[state=checked]:text-foreground"
: "text-[#2f3640] focus:bg-[#f4f5f6] focus:text-[#1f2937] data-[state=checked]:bg-transparent data-[state=checked]:text-[#1f2937] dark:text-zinc-100 dark:focus:bg-white/10 dark:focus:text-white dark:data-[state=checked]:text-white",
@ -8389,10 +8389,10 @@ export function CanvasChatPanel({
)}
>
<span className="flex w-full items-center justify-between gap-2">
<span className="flex min-w-0 items-center gap-2">
<span className="flex min-w-0 flex-1 items-center gap-3">
<span
className={cn(
"flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full leading-none",
"flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full leading-none",
isVideoWorkspace
? "border border-border/60 bg-background"
: "border border-transparent bg-white dark:border-white/20 dark:bg-white"
@ -8414,7 +8414,7 @@ export function CanvasChatPanel({
) : (
<span
className={cn(
"flex h-full w-full items-center justify-center text-[10px] font-medium leading-none",
"flex h-full w-full items-center justify-center text-[13px] font-medium leading-none",
isVideoWorkspace ? "text-muted-foreground" : "text-[#6b7280]"
)}
>
@ -8422,13 +8422,15 @@ export function CanvasChatPanel({
</span>
)}
</span>
<span className="truncate text-[13px] font-medium leading-none">{model.displayName}</span>
<span className="min-w-0 flex-1 whitespace-nowrap text-[17px] font-medium leading-none tracking-[-0.01em]">
{model.displayName}
</span>
</span>
<span className="flex shrink-0 items-center gap-1">
{discountLabel ? (
<span
className={cn(
"rounded-[5px] border px-1 py-0.5 text-[8px] font-semibold leading-none",
"rounded-[10px] border px-2 py-0.5 text-[11px] font-semibold leading-none",
isVideoWorkspace
? "border-border/70 bg-muted/80 text-foreground/80"
: "border-[#d0d4dc] bg-[#eef1f5] text-[#5c6574] dark:border-white/15 dark:bg-white/10 dark:text-zinc-200"
@ -8440,7 +8442,7 @@ export function CanvasChatPanel({
{model.availabilityLabel ? (
<span
className={cn(
"rounded-[5px] border px-1 py-0.5 text-[8px] font-semibold leading-none",
"rounded-[10px] border px-2 py-0.5 text-[11px] font-semibold leading-none",
model.availabilityStatus === "maintenance"
? isVideoWorkspace
? "border-amber-400/30 bg-amber-500/10 text-amber-300"
@ -8454,7 +8456,7 @@ export function CanvasChatPanel({
</span>
) : null}
{modelSelectValue === model.id ? (
<Check className={cn("h-3.5 w-3.5", isVideoWorkspace ? "text-foreground" : "text-[#1f2937]")} />
<Check className={cn("h-5 w-5", isVideoWorkspace ? "text-foreground" : "text-[#1f2937]")} />
) : null}
</span>
</span>

4
components/multimodal-input.tsx
View File

@ -1869,7 +1869,7 @@ function PureModelSelectorCompact({
</Button>
)}
</Trigger>
<PromptInputModelSelectContent className="!w-[min(430px,calc(100vw-24px))] max-h-[426px] overflow-hidden rounded-[22px] border border-[#bfc6cf] bg-[#f2f3f5]/90 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.12)]">
<PromptInputModelSelectContent className="!w-[min(520px,calc(100vw-24px))] max-h-[426px] overflow-hidden rounded-[22px] border border-[#bfc6cf] bg-[#f2f3f5]/90 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.12)]">
<div className="max-h-[392px] space-y-1 overflow-y-auto pr-1">
{displayModels.map((model) => (
<SelectItem
@ -1910,7 +1910,7 @@ function PureModelSelectorCompact({
</span>
)}
</span>
<span className="min-w-max whitespace-nowrap text-[17px] font-medium leading-none tracking-[-0.01em]">
<span className="min-w-0 flex-1 whitespace-nowrap text-[17px] font-medium leading-none tracking-[-0.01em]">
{model.isSubModel ? `└ ${model.displayName}` : model.displayName}
</span>
</span>