From 686111628e040b4d01893bdae01b57020529e303 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Fri, 12 Jun 2026 21:44:10 +0800
Subject: [PATCH] Fix model dropdown name clipping

---
 components/canvas/CanvasChatPanel.tsx | 24 +++++++++++++-----------
 components/multimodal-input.tsx       |  4 ++--
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 56024d202..d824f4484 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -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>
diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx
index 962ac86f0..aa5dd8084 100644
--- a/components/multimodal-input.tsx
+++ b/components/multimodal-input.tsx
@@ -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>