diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 77cdb0ea1..baba4b0cb 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -3695,7 +3695,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                         "flex min-w-0 flex-1 items-center",
                         isComposerFooterCompact
                           ? "gap-1 overflow-hidden"
-                          : "gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:min-w-max sm:overflow-visible",
+                          : "gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
                       )}
                     >
                       {/* Provider/model picker */}
diff --git a/apps/web/src/components/chat/CodexTraitsPicker.tsx b/apps/web/src/components/chat/CodexTraitsPicker.tsx
index 6c72f497b..a8a65250e 100644
--- a/apps/web/src/components/chat/CodexTraitsPicker.tsx
+++ b/apps/web/src/components/chat/CodexTraitsPicker.tsx
@@ -28,12 +28,7 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
     high: "High",
     xhigh: "Extra High",
   };
-  const triggerLabel = [
-    reasoningLabelByOption[props.effort],
-    ...(props.fastModeEnabled ? ["Fast"] : []),
-  ]
-    .filter(Boolean)
-    .join(" · ");
+  const effortLabel = reasoningLabelByOption[props.effort];
 
   return (
     <Menu
@@ -47,12 +42,24 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
           <Button
             size="sm"
             variant="ghost"
-            className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
+            className="min-w-0 max-w-40 shrink justify-start overflow-hidden whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:max-w-48 sm:px-3 [&_svg]:mx-0"
           />
         }
       >
-        <span>{triggerLabel}</span>
-        <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />
+        <span className="flex min-w-0 w-full items-center gap-2 overflow-hidden">
+          {props.fastModeEnabled ? (
+            <span className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+              <span className="min-w-0 flex-1 truncate">{effortLabel}</span>
+              <span className="shrink-0 text-muted-foreground/60" aria-hidden="true">
+                ·
+              </span>
+              <span className="shrink-0">Fast</span>
+            </span>
+          ) : (
+            <span className="min-w-0 flex-1 truncate">{effortLabel}</span>
+          )}
+          <ChevronDownIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
+        </span>
       </MenuTrigger>
       <MenuPopup align="start">
         <MenuGroup>
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 9bc034991..0db4cdf28 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -106,19 +106,22 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             size="sm"
             variant="ghost"
             className={cn(
-              "min-w-0 shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80",
-              props.compact ? "max-w-42" : "sm:px-3",
+              "min-w-0 justify-start overflow-hidden whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 [&_svg]:mx-0",
+              props.compact ? "max-w-42 shrink-0" : "max-w-48 shrink sm:max-w-56 sm:px-3",
             )}
             disabled={props.disabled}
           />
         }
       >
         <span
-          className={cn("flex min-w-0 items-center gap-2", props.compact ? "max-w-36" : undefined)}
+          className={cn(
+            "flex min-w-0 w-full items-center gap-2 overflow-hidden",
+            props.compact ? "max-w-36" : undefined,
+          )}
         >
           <ProviderIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground/70" />
-          <span className="truncate">{selectedModelLabel}</span>
-          <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />
+          <span className="min-w-0 flex-1 truncate">{selectedModelLabel}</span>
+          <ChevronDownIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
         </span>
       </MenuTrigger>
       <MenuPopup align="start">