fix(studio): in a narrow conversation the composer's model pill shrinks the model name instead of letting the divider and reasoning level spill out of the pill and onto the send button

desktop/frontend-next/src/design/composer.css

@@ -110,7 +110,11 @@
   .compose .studio-effort-reading, .compose .studio-model-sep { display: none; }
 }
 .compose .studio-model-group { flex: none; margin-left: auto; }
-.compose .model-picker .nm { flex: none; max-width: none; }
+.compose .model-picker .nm { flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
+.compose .model-picker > :not(.nm) { flex: none; }
+@container conversation (max-width: 720px) {
+  .compose .studio-model-control { max-width: clamp(84px, 40cqw, 220px); }
+}
 .compose .studio-model-control { flex: none; min-width: 0; }
 .composer-menu.mode-menu { width: 300px; padding: 0 0 6px; border-color: var(--border); }
 .mode-menu .mi.head { height: auto; padding: 12px 14px 8px; color: var(--faint); font: var(--w-reg) var(--fs-meta)/1.3 var(--ui); }

desktop/frontend-next/src/design/composer.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import composer from "./composer.css?raw";
+
+const rule = (selector: string): string => {
+  const at = composer.lastIndexOf("\n" + selector + " {");
+  return at < 0 ? "" : composer.slice(at, composer.indexOf("}", at));
+};
+
+describe("the composer's model pill in a narrow conversation", () => {
+  it("lets the model name give way, so the divider and level never spill out of the pill onto the send button", () => {
+    const nm = rule(".compose .model-picker .nm");
+    expect(nm).toMatch(/flex:\s*0 1 auto/);
+    expect(nm).toMatch(/min-width:\s*0/);
+    expect(nm).toMatch(/overflow:\s*hidden/);
+    expect(nm).toMatch(/text-overflow:\s*ellipsis/);
+  });
+
+  it("keeps the pill as wide as the capped control allows, never wider than it", () => {
+    expect(rule(".compose .studio-model-control")).toMatch(/min-width:\s*0/);
+  });
+
+  it("keeps everything but the name at its own size, and gives a narrow conversation room for the whole pill", () => {
+    expect(rule(".compose .model-picker > :not(.nm)")).toMatch(/flex:\s*none/);
+    expect(composer).toMatch(/@container conversation \(max-width: 720px\)\s*\{\s*\.compose \.studio-model-control \{ max-width: clamp\(84px, 40cqw, 220px\)/);
+  });
+});