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('[data-web-shell-model-button]') + ?.click(); + }); + + const option = Array.from( + document.querySelectorAll( + '[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} >