From f08f502bff91e6ec5fd64aa4237ae3d369b46e57 Mon Sep 17 00:00:00 2001
From: zqy <15572837359@163.com>
Date: Tue, 9 Jun 2026 15:18:10 +0800
Subject: [PATCH] fix(desktop): widen model switcher popover for long model
 names

Decouple popover width from trigger width by using minWidth instead
of fixed width, and set maxWidth to 400px. Add title attributes on
model name and provider labels for hover tooltip fallback.

Fixes #3628

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 desktop/frontend/src/components/ModelSwitcher.tsx | 6 +++---
 desktop/frontend/src/styles.css                   | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/desktop/frontend/src/components/ModelSwitcher.tsx b/desktop/frontend/src/components/ModelSwitcher.tsx
index d25bc7ff6..0de7ce3c2 100644
--- a/desktop/frontend/src/components/ModelSwitcher.tsx
+++ b/desktop/frontend/src/components/ModelSwitcher.tsx
@@ -44,7 +44,7 @@ export function ModelSwitcher({ label, tabId, onPick }: { label: string; tabId?:
         anchorRef={triggerRef}
         onClose={() => setOpen(false)}
         className="modelsw__menu modelsw__menu--portal"
-        style={{ width: triggerWidth, minWidth: triggerWidth }}
+        style={{ minWidth: triggerWidth, maxWidth: 400 }}
       >
         <div role="listbox">
           {models.length === 0 && <div className="modelsw__empty">{t("status.noModels")}</div>}
@@ -58,8 +58,8 @@ export function ModelSwitcher({ label, tabId, onPick }: { label: string; tabId?:
               onClick={() => pick(m.ref)}
             >
               <span className="modelsw__copy">
-                <span className="modelsw__model">{m.model}</span>
-                <span className="modelsw__provider">{providerLabel(m.provider, t)}</span>
+                <span className="modelsw__model" title={m.model}>{m.model}</span>
+                <span className="modelsw__provider" title={providerLabel(m.provider, t)}>{providerLabel(m.provider, t)}</span>
               </span>
               {m.current && <Check size={13} className="modelsw__check" />}
             </button>
diff --git a/desktop/frontend/src/styles.css b/desktop/frontend/src/styles.css
index 714665af9..56a088a0e 100644
--- a/desktop/frontend/src/styles.css
+++ b/desktop/frontend/src/styles.css
@@ -3044,14 +3044,17 @@ a[href] {
   flex-direction: column;
   gap: 2px;
 }
-.modelsw__model,
-.modelsw__provider {
+.modelsw__model {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .modelsw__provider {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--fg-faint);
   font-size: 11px;
 }