From ab30330da8debefad9830af2f23b08fb216c0eae Mon Sep 17 00:00:00 2001
From: Shaojin Wen <shaojin.wensj@alibaba-inc.com>
Date: Fri, 31 Jul 2026 19:59:08 +0800
Subject: [PATCH] fix(web-shell): adaptive dropdown width for long model names
 (#8220)

The toolbar popover used a fixed 18rem width, truncating long model
names in the dropdown list. Change to max-content so the popover
adapts to its content width (capped at the available viewport width).

Also add title attributes on dropdown items and the model trigger
button so the full name is accessible via hover and screen readers.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 .../client/components/ChatEditor.module.css   |  2 +-
 .../client/components/ChatEditor.test.tsx     | 24 +++++++++++++++++++
 .../client/components/ChatEditor.tsx          |  4 +++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/web-shell/client/components/ChatEditor.module.css b/packages/web-shell/client/components/ChatEditor.module.css
index 514e0c0b40..606b085a0d 100644
--- a/packages/web-shell/client/components/ChatEditor.module.css
+++ b/packages/web-shell/client/components/ChatEditor.module.css
@@ -103,7 +103,7 @@
 }
 
 :global([data-web-shell-toolbar-popover]) {
-  width: min(18rem, var(--radix-popover-content-available-width));
+  width: min(max-content, var(--radix-popover-content-available-width));
   max-height: var(--radix-popover-content-available-height);
   overflow: hidden;
 }
diff --git a/packages/web-shell/client/components/ChatEditor.test.tsx b/packages/web-shell/client/components/ChatEditor.test.tsx
index 475893cdbc..957d8bc6fc 100644
--- a/packages/web-shell/client/components/ChatEditor.test.tsx
+++ b/packages/web-shell/client/components/ChatEditor.test.tsx
@@ -915,6 +915,30 @@ describe('ChatEditor toolbar popovers', () => {
     expect(button?.textContent).not.toContain(routeId);
   });
 
+  it('exposes the complete model name on dropdown items for hover', () => {
+    const modelLabel =
+      'Qwen Very Long Model Name For Web Shell Reproduction 2026';
+    const container = renderChatEditor({
+      visibleToolbarActions: ['model'],
+      currentModel: 'long-model',
+      availableModels: [{ id: 'long-model', label: modelLabel }],
+    });
+
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>('[data-web-shell-model-button]')
+        ?.click();
+    });
+
+    const option = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        '[data-web-shell-toolbar-popover] button',
+      ),
+    ).find((button) => button.textContent?.includes(modelLabel));
+    expect(option).not.toBeUndefined();
+    expect(option?.title).toBe(modelLabel);
+  });
+
   it('switches between sibling toolbar popovers without dismissing the target', async () => {
     const container = renderChatEditor({
       visibleToolbarActions: ['approvalMode', 'model'],
diff --git a/packages/web-shell/client/components/ChatEditor.tsx b/packages/web-shell/client/components/ChatEditor.tsx
index aa817b8761..7102600d2a 100644
--- a/packages/web-shell/client/components/ChatEditor.tsx
+++ b/packages/web-shell/client/components/ChatEditor.tsx
@@ -772,6 +772,7 @@ function ToolbarPopover({
               className={`${styles.dropdownItem} ${
                 item.id === activeId ? styles.dropdownItemActive : ''
               }`}
+              title={item.label}
               onClick={() => {
                 selectionRef.current = true;
                 onSelect(item.id);
@@ -2257,7 +2258,8 @@ export const ChatEditor = memo(
                               core.closeAtMenu();
                               setQuickActionsOpen(false);
                             }}
-                            aria-label={t('model.select')}
+                            aria-label={`${t('model.select')}: ${modelLabel}`}
+                            title={modelLabel}
                           >
                             <span className={styles.toolBtnModelIcon}>
                               <ModelIcon />