fix(web): preserve composer model labels before overflow

Author: badcuban

apps/web/src/components/ChatView.browser.tsx

@@ -9146,7 +9146,10 @@ describe("ChatView timeline estimator parity (full app)", () => {
       });
 
       const footer = await waitForElement(
-        () => document.querySelector<HTMLElement>('[data-chat-composer-footer="true"]'),
+        () =>
+          Array.from(
+            document.querySelectorAll<HTMLElement>('[data-chat-composer-footer="true"]'),
+          ).find((candidate) => candidate.getBoundingClientRect().width > 0) ?? null,
         "Unable to find composer footer.",
       );
       const leftActions = await waitForElement(
@@ -9194,7 +9197,7 @@ describe("ChatView timeline estimator parity (full app)", () => {
     }
   });
 
-  it("protects model and reasoning labels before shrinking interaction and access", async () => {
+  it("keeps model and reasoning labels in the icon-only footer", async () => {
     const mounted = await mountChatView({
       viewport: WIDE_FOOTER_VIEWPORT,
       snapshot: fixture.snapshot,
@@ -9235,28 +9238,30 @@ describe("ChatView timeline estimator parity (full app)", () => {
 
     try {
       await waitForServerConfigToApply();
-      await mounted.setContainerSize({
-        width: 900,
-        height: WIDE_FOOTER_VIEWPORT.height,
+      await mounted.setViewport({
+        ...WIDE_FOOTER_VIEWPORT,
+        width: 560,
       });
 
       const footer = await waitForElement(
         () => document.querySelector<HTMLElement>('[data-chat-composer-footer="true"]'),
         "Unable to find composer footer.",
       );
+      await vi.waitFor(() => {
+        expect(footer.dataset.chatComposerFooterIconOnly).toBe("true");
+        expect(footer.dataset.chatComposerFooterCompact).toBe("false");
+      });
       const modelButton = await waitForElement(
-        findComposerProviderModelPicker,
+        () => footer.querySelector<HTMLButtonElement>('[data-chat-provider-model-picker="true"]'),
         "Unable to find provider model picker.",
       );
       const reasoningButton = await waitForButtonByTextWithin(footer, "Medium");
-      const interactionButton = await waitForButtonByTextWithin(footer, "Build");
-      const accessButton = await waitForButtonByTextWithin(footer, "Full access");
-
-      expect(footer.dataset.chatComposerFooterIconOnly).toBe("false");
+      expect(modelButton.textContent).toContain("GPT-5");
+      expect(reasoningButton.textContent).toBe("Medium");
+      expect(modelButton.getBoundingClientRect().width).toBeGreaterThan(32);
+      expect(reasoningButton.getBoundingClientRect().width).toBeGreaterThan(32);
       expect(getComputedStyle(modelButton).flexShrink).toBe("0");
       expect(getComputedStyle(reasoningButton).flexShrink).toBe("0");
-      expect(getComputedStyle(interactionButton).flexShrink).toBe("1");
-      expect(getComputedStyle(accessButton).flexShrink).toBe("1");
     } finally {
       await mounted.cleanup();
     }

apps/web/src/components/chat/ChatComposer.tsx

@@ -1498,7 +1498,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     model: selectedModel,
     models: selectedProviderModels,
     modelOptions: composerModelOptions?.[selectedInstanceId],
-    iconOnly: isComposerFooterIconOnly,
+    iconOnly: isComposerFooterCompact,
   });
   const pendingPrimaryAction = useMemo(
     () =>
@@ -3622,7 +3622,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 )}
               >
                 <ProviderModelPicker
-                  compact={isComposerFooterIconOnly}
+                  compact={isComposerFooterCompact}
                   activeInstanceId={selectedInstanceId}
                   model={selectedModelForPickerWithCustomFallback}
                   lockedProvider={lockedProvider}

apps/web/src/components/chat/ProviderModelPicker.tsx

@@ -130,7 +130,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             data-chat-provider-model-picker="true"
             className={cn(
               "min-w-0 justify-start overflow-hidden whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 [&_svg]:mx-0",
-              props.compact ? "max-w-42 shrink" : "max-w-48 shrink-0 sm:max-w-56 sm:px-3",
+              props.compact ? "max-w-42 shrink" : "min-w-20 max-w-48 shrink-0 sm:max-w-56 sm:px-3",
               props.triggerClassName,
             )}
             disabled={props.disabled}