From 659e7cf14024e0f2717a153ae228eaffcf83ed87 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Wed, 18 Mar 2026 17:14:18 +0530
Subject: [PATCH 1/4] Fix composer footer button overflow behavior

- remove `sm:min-w-max sm:overflow-visible` from footer action row
- keep horizontal scrolling enabled to prevent button overflow at larger breakpoints
---
 apps/web/src/components/ChatView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 */}

From 215c6bf5f06f72a33176f6ed402f1a5ed0584bf0 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Wed, 18 Mar 2026 17:31:01 +0530
Subject: [PATCH 2/4] Fix picker trigger label overflow in chat controls

- constrain trigger button widths and hide overflow in traits/model pickers
- truncate long labels while keeping chevron/icon visible and aligned
---
 apps/web/src/components/chat/CodexTraitsPicker.tsx  |  8 +++++---
 .../web/src/components/chat/ProviderModelPicker.tsx | 13 ++++++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/chat/CodexTraitsPicker.tsx b/apps/web/src/components/chat/CodexTraitsPicker.tsx
index 6c72f497b..ddfabe9d0 100644
--- a/apps/web/src/components/chat/CodexTraitsPicker.tsx
+++ b/apps/web/src/components/chat/CodexTraitsPicker.tsx
@@ -47,12 +47,14 @@ 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">
+          <span className="min-w-0 flex-1 truncate">{triggerLabel}</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">

From 96758d3f4d6c2287c6e181c744492db431c1b4ef Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Wed, 18 Mar 2026 17:39:28 +0530
Subject: [PATCH 3/4] Fix traits picker trigger overflow in Fast mode

- Render effort and Fast labels in separate truncating spans
- Preserve readable trigger text without overflow when both are shown
---
 .../src/components/chat/CodexTraitsPicker.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/chat/CodexTraitsPicker.tsx b/apps/web/src/components/chat/CodexTraitsPicker.tsx
index ddfabe9d0..41d51536a 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
@@ -52,7 +47,17 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
         }
       >
         <span className="flex min-w-0 w-full items-center gap-2 overflow-hidden">
-          <span className="min-w-0 flex-1 truncate">{triggerLabel}</span>
+          {props.fastModeEnabled ? (
+            <span className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+              <span className="min-w-0 basis-0 grow truncate">{effortLabel}</span>
+              <span className="shrink-0 text-muted-foreground/60" aria-hidden="true">
+                ·
+              </span>
+              <span className="min-w-0 basis-0 grow truncate">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>

From 715d669a1c1dfbfa92214cdacf6edf62a248a9f3 Mon Sep 17 00:00:00 2001
From: UtkarshUsername <putkarsh184@gmail.com>
Date: Wed, 18 Mar 2026 17:44:22 +0530
Subject: [PATCH 4/4] Fix Codex traits label overflow in fast mode button

- use flex-1 for effort label truncation
- keep "Fast" token shrink-0 to prevent clipping/layout overflow
---
 apps/web/src/components/chat/CodexTraitsPicker.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/CodexTraitsPicker.tsx b/apps/web/src/components/chat/CodexTraitsPicker.tsx
index 41d51536a..a8a65250e 100644
--- a/apps/web/src/components/chat/CodexTraitsPicker.tsx
+++ b/apps/web/src/components/chat/CodexTraitsPicker.tsx
@@ -49,11 +49,11 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
         <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 basis-0 grow truncate">{effortLabel}</span>
+              <span className="min-w-0 flex-1 truncate">{effortLabel}</span>
               <span className="shrink-0 text-muted-foreground/60" aria-hidden="true">
                 ·
               </span>
-              <span className="min-w-0 basis-0 grow truncate">Fast</span>
+              <span className="shrink-0">Fast</span>
             </span>
           ) : (
             <span className="min-w-0 flex-1 truncate">{effortLabel}</span>