From ac7b8cf4b44342a4a8d998a119ccc9f78a85d3c4 Mon Sep 17 00:00:00 2001
From: Xubin Ren <52506698+Re-bin@users.noreply.github.com>
Date: Sat, 25 Jul 2026 04:28:45 +0800
Subject: [PATCH] fix(webui): preserve preset widths while switching

---
 webui/src/components/thread/ModelPresetBadge.tsx |  4 ++--
 webui/src/tests/thread-composer.test.tsx         | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webui/src/components/thread/ModelPresetBadge.tsx b/webui/src/components/thread/ModelPresetBadge.tsx
index 03774165..c619b521 100644
--- a/webui/src/components/thread/ModelPresetBadge.tsx
+++ b/webui/src/components/thread/ModelPresetBadge.tsx
@@ -266,7 +266,7 @@ export function ModelPresetBadge({
         <span
           data-testid="composer-model-pill-viewport"
           className={cn(
-            "composer-model-pill-viewport pointer-events-none absolute -left-2 right-0 overflow-hidden bg-transparent",
+            "composer-model-pill-viewport pointer-events-none absolute right-0 w-max max-w-[calc(44vw+0.5rem)] overflow-hidden bg-transparent pl-2 sm:max-w-[18.5rem]",
             isHero ? "-bottom-2.5 -top-2.5" : "-bottom-3 -top-3",
           )}
           aria-hidden
@@ -274,7 +274,7 @@ export function ModelPresetBadge({
           <span
             data-testid="composer-model-pill-track"
             data-settling={motion.settling ? "true" : undefined}
-            className="composer-model-pill-track ml-auto flex w-[calc(100%-0.5rem)] flex-col items-end gap-1 will-change-transform"
+            className="composer-model-pill-track ml-auto flex w-max max-w-full flex-col items-end gap-1 will-change-transform"
             onTransitionEnd={(event) => {
               if (motion.settling && event.currentTarget === event.target) setMotion(null);
             }}
diff --git a/webui/src/tests/thread-composer.test.tsx b/webui/src/tests/thread-composer.test.tsx
index 240aad04..fec9b4f1 100644
--- a/webui/src/tests/thread-composer.test.tsx
+++ b/webui/src/tests/thread-composer.test.tsx
@@ -479,9 +479,16 @@ describe("ThreadComposer", () => {
     longPress(badge);
     expect(badge).toHaveAttribute("data-switching", "true");
     const viewport = screen.getByTestId("composer-model-pill-viewport");
-    expect(viewport).toHaveClass("overflow-hidden", "-left-2", "-top-3", "-bottom-3");
+    expect(viewport).toHaveClass(
+      "right-0",
+      "w-max",
+      "max-w-[calc(44vw+0.5rem)]",
+      "overflow-hidden",
+      "-top-3",
+      "-bottom-3",
+    );
     const track = screen.getByTestId("composer-model-pill-track");
-    expect(track).toHaveClass("items-end", "gap-1");
+    expect(track).toHaveClass("w-max", "max-w-full", "items-end", "gap-1");
     const activeTouchMove = new Event("touchmove", {
       bubbles: true,
       cancelable: true,