fix(webui): show full model preset labels

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`,