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>

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;
 }

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'],

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 />