diff --git a/webui/src/components/thread/ModelPresetBadge.tsx b/webui/src/components/thread/ModelPresetBadge.tsx
index 1b354e84..03774165 100644
--- a/webui/src/components/thread/ModelPresetBadge.tsx
+++ b/webui/src/components/thread/ModelPresetBadge.tsx
@@ -245,13 +245,23 @@ export function ModelPresetBadge({
       onDragStart={(event) => event.preventDefault()}
       style={{ touchAction: canSwitch ? "manipulation" : undefined }}
       className={cn(
-        "thread-composer-model-badge group/model-badge relative inline-flex w-[5.75rem] min-w-0 justify-end appearance-none border-0 bg-transparent p-0 shadow-none",
+        "thread-composer-model-badge group/model-badge relative inline-flex w-fit min-w-0 max-w-[min(18rem,44vw)] justify-end appearance-none border-0 bg-transparent p-0 shadow-none",
         interactive && "cursor-pointer",
         canSwitch && "cursor-grab select-none focus-visible:outline-none",
         motion && "z-10 cursor-grabbing",
-        isHero ? "h-8 max-w-[44vw]" : "h-9 max-w-[44vw]",
+        isHero ? "h-8" : "h-9",
       )}
     >
+      <PresetPill
+        className={motion && "invisible"}
+        label={label}
+        modelDetail={modelDetail}
+        provider={provider}
+        providerLabel={providerLabel}
+        needsSetup={needsSetup}
+        fallbackModelName={fallbackModelName}
+        isHero={isHero}
+      />
       {motion ? (
         <span
           data-testid="composer-model-pill-viewport"
@@ -291,22 +301,13 @@ export function ModelPresetBadge({
             })}
           </span>
         </span>
-      ) : (
-        <PresetPill
-          label={label}
-          modelDetail={modelDetail}
-          provider={provider}
-          providerLabel={providerLabel}
-          needsSetup={needsSetup}
-          fallbackModelName={fallbackModelName}
-          isHero={isHero}
-        />
-      )}
+      ) : null}
     </Container>
   );
 }
 
 function PresetPill({
+  className,
   label,
   modelDetail,
   provider,
@@ -317,6 +318,7 @@ function PresetPill({
   offset,
   scale,
 }: {
+  className?: string | false | null;
   label: string;
   modelDetail?: string | null;
   provider?: string | null;
@@ -363,6 +365,7 @@ function PresetPill({
         needsSetup && "border-amber-500/35 bg-amber-50/70 text-amber-900 dark:bg-amber-500/10 dark:text-amber-200",
         isHero ? "gap-1.5 px-2.5 text-[12px]" : "gap-2 px-3 text-[12.5px]",
         offset !== undefined && "composer-model-pill-dock",
+        className,
       )}
       style={scale === undefined ? undefined : {
         height: `${isHero ? 32 : 36}px`,
diff --git a/webui/src/tests/thread-composer.test.tsx b/webui/src/tests/thread-composer.test.tsx
index 5ca9cf5c..240aad04 100644
--- a/webui/src/tests/thread-composer.test.tsx
+++ b/webui/src/tests/thread-composer.test.tsx
@@ -406,6 +406,34 @@ describe("ThreadComposer", () => {
     expect(input.parentElement?.parentElement?.className).toContain("max-w-[58rem]");
   });
 
+  it("lets long model preset labels use their intrinsic width", () => {
+    render(
+      <ThreadComposer
+        onSend={vi.fn()}
+        modelLabel="gpt-5.6-sol"
+        modelPreset="gpt-5-6-sol"
+        modelProvider="openai_codex"
+        modelPresets={[
+          {
+            name: "gpt-5-6-sol",
+            label: "gpt-5.6-sol",
+            model: "openai-codex/gpt-5.6-sol",
+            provider: "openai_codex",
+          },
+          ...MODEL_PRESETS,
+        ]}
+        onModelPresetChange={vi.fn()}
+        placeholder="Ask anything..."
+        variant="hero"
+      />,
+    );
+
+    const badge = screen.getByRole("spinbutton", { name: "gpt-5.6-sol" });
+    expect(badge).toHaveClass("w-fit", "max-w-[min(18rem,44vw)]");
+    expect(badge).not.toHaveClass("w-[5.75rem]");
+    expect(screen.getByText("gpt-5.6-sol")).toBeInTheDocument();
+  });
+
   it("keeps the thread composer compact while matching the hero style", () => {
     render(
       <ThreadComposer