Show the provider strip in the model menu on narrow screens (#4762)

Author: georgi

web/src/styles/mobile.css

@@ -178,45 +178,9 @@
     max-width: 100% !important;
   }
 
-  /* Model Menu fullscreen on mobile — match Settings dialog pattern. */
-  .mobile .model-menu__dialog .MuiDialog-paper {
-    margin: 0 !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    height: 100dvh !important;
-    max-height: 100dvh !important;
-    border-radius: 0 !important;
-  }
-
-  /* Collapse complex 3-column grid → single column */
-  .mobile .model-menu__grid {
-    display: grid !important;
-    grid-template-columns: 1fr !important;
-    grid-template-rows: auto 1fr !important;
-    gap: var(--spacing-xs) !important;
-  }
-
-  /* Hide provider list and sidebar (favorites/recent) */
-  .mobile .model-menu__providers-list,
-  .mobile .model-menu__sidebar {
-    display: none !important;
-  }
-
-  /* Hide advanced filters bar (keep just search) */
-  .mobile .model-menu__filters-bar {
-    display: none !important;
-  }
-
-  /* Expand model list to full width */
-  .mobile .model-menu__model-list-container {
-    max-width: none !important;
-    width: 100% !important;
-  }
-
-  /* Hide footer counts and other non-essential info */
-  .mobile .model-menu__footer {
-    display: none !important;
-  }
+  /* The model menu handles its own narrow-screen layout in
+     ModelMenuDialogBase (full-screen paper, horizontal provider strip), so it
+     needs no overrides here. */
 
   /* Chat Composer Mobile Styles
      Keep compose-message in its default column layout on mobile so the

web/tests/visual/chat.spec.ts

@@ -126,6 +126,26 @@ test.describe("Chat Interface", () => {
     );
   });
 
+  test("composer model selector keeps its provider strip @responsive", async ({
+    page
+  }) => {
+    // On narrow screens the provider rail becomes a horizontal strip. A stale
+    // `.mobile` stylesheet once hid it outright, leaving the menu with no way
+    // to filter by provider.
+    await gotoPage(page, "/chat/thread-story");
+    await waitForComposer(page);
+    expect(await openComposerChip(page, "model")).toBe(true);
+
+    const strip = page.locator(".model-menu__providers-list").first();
+    await expect(strip).toBeVisible();
+    const box = await strip.boundingBox();
+    expect(box?.width ?? 0).toBeGreaterThan(0);
+    expect(box?.height ?? 0).toBeGreaterThan(0);
+    await expect(
+      page.locator(".model-menu__provider-item").first()
+    ).toBeVisible();
+  });
+
   test("dashboard / portal @responsive @smoke", async ({ page }) => {
     // The portal (/dashboard) is the chat-led home surface: header + composer
     // + recent threads. Grouped with chat since it shares the composer shell.