authorgravatar for 73941998+UtkarshUsername@users.noreply.github.comUtkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com> 2026-03-18 22:16:09+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-03-18 09:46:09-07:00
logb500a36a94524f9829b0675e602789c4a56f6477
treeb592e9e05182563f21acf9269ecdb56e8a924770
parent1310045629f6613b2fd3e9b82e2e371495e0ca2a
signature Signed by PGP key B5690EEEBB952194

fix: implement button overflow (#1193)

3 files changed, 25 insertions(+), 15 deletions(-)

apps/web/src/components/ChatView.tsx+1-1
...@@ -3695,7 +3695,7 @@ export default function ChatView({ threadId }: ChatViewProps) {...@@ -3695,7 +3695,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
3695 "flex min-w-0 flex-1 items-center",3695 "flex min-w-0 flex-1 items-center",
3696 isComposerFooterCompact3696 isComposerFooterCompact
3697 ? "gap-1 overflow-hidden"3697 ? "gap-1 overflow-hidden"
3698 : "gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:min-w-max sm:overflow-visible",3698 : "gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
3699 )}3699 )}
3700 >3700 >
3701 {/* Provider/model picker */}3701 {/* Provider/model picker */}
apps/web/src/components/chat/CodexTraitsPicker.tsx+16-9
...@@ -28,12 +28,7 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {...@@ -28,12 +28,7 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
28 high: "High",28 high: "High",
29 xhigh: "Extra High",29 xhigh: "Extra High",
30 };30 };
31 const triggerLabel = [31 const effortLabel = reasoningLabelByOption[props.effort];
32 reasoningLabelByOption[props.effort],
33 ...(props.fastModeEnabled ? ["Fast"] : []),
34 ]
35 .filter(Boolean)
36 .join(" · ");
3732
38 return (33 return (
39 <Menu34 <Menu
...@@ -47,12 +42,24 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {...@@ -47,12 +42,24 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
47 <Button42 <Button
48 size="sm"43 size="sm"
49 variant="ghost"44 variant="ghost"
50 className="shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"45 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"
51 />46 />
52 }47 }
53 >48 >
54 <span>{triggerLabel}</span>49 <span className="flex min-w-0 w-full items-center gap-2 overflow-hidden">
55 <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />50 {props.fastModeEnabled ? (
51 <span className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
52 <span className="min-w-0 flex-1 truncate">{effortLabel}</span>
53 <span className="shrink-0 text-muted-foreground/60" aria-hidden="true">
54 ·
55 </span>
56 <span className="shrink-0">Fast</span>
57 </span>
58 ) : (
59 <span className="min-w-0 flex-1 truncate">{effortLabel}</span>
60 )}
61 <ChevronDownIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
62 </span>
56 </MenuTrigger>63 </MenuTrigger>
57 <MenuPopup align="start">64 <MenuPopup align="start">
58 <MenuGroup>65 <MenuGroup>
apps/web/src/components/chat/ProviderModelPicker.tsx+8-5
...@@ -106,19 +106,22 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {...@@ -106,19 +106,22 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
106 size="sm"106 size="sm"
107 variant="ghost"107 variant="ghost"
108 className={cn(108 className={cn(
109 "min-w-0 shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80",109 "min-w-0 justify-start overflow-hidden whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80 [&_svg]:mx-0",
110 props.compact ? "max-w-42" : "sm:px-3",110 props.compact ? "max-w-42 shrink-0" : "max-w-48 shrink sm:max-w-56 sm:px-3",
111 )}111 )}
112 disabled={props.disabled}112 disabled={props.disabled}
113 />113 />
114 }114 }
115 >115 >
116 <span116 <span
117 className={cn("flex min-w-0 items-center gap-2", props.compact ? "max-w-36" : undefined)}117 className={cn(
118 "flex min-w-0 w-full items-center gap-2 overflow-hidden",
119 props.compact ? "max-w-36" : undefined,
120 )}
118 >121 >
119 <ProviderIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground/70" />122 <ProviderIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground/70" />
120 <span className="truncate">{selectedModelLabel}</span>123 <span className="min-w-0 flex-1 truncate">{selectedModelLabel}</span>
121 <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />124 <ChevronDownIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
122 </span>125 </span>
123 </MenuTrigger>126 </MenuTrigger>
124 <MenuPopup align="start">127 <MenuPopup align="start">