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) {
36953695 "flex min-w-0 flex-1 items-center",
36963696 isComposerFooterCompact
36973697 ? "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",
36993699 )}
37003700 >
37013701 {/* Provider/model picker */}
apps/web/src/components/chat/CodexTraitsPicker.tsx+16-9
......@@ -28,12 +28,7 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
2828 high: "High",
2929 xhigh: "Extra High",
3030 };
31 const triggerLabel = [
32 reasoningLabelByOption[props.effort],
33 ...(props.fastModeEnabled ? ["Fast"] : []),
34 ]
35 .filter(Boolean)
36 .join(" · ");
31 const effortLabel = reasoningLabelByOption[props.effort];
3732
3833 return (
3934 <Menu
......@@ -47,12 +42,24 @@ export const CodexTraitsPicker = memo(function CodexTraitsPicker(props: {
4742 <Button
4843 size="sm"
4944 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"
5146 />
5247 }
5348 >
54 <span>{triggerLabel}</span>
55 <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />
49 <span className="flex min-w-0 w-full items-center gap-2 overflow-hidden">
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>
5663 </MenuTrigger>
5764 <MenuPopup align="start">
5865 <MenuGroup>
apps/web/src/components/chat/ProviderModelPicker.tsx+8-5
......@@ -106,19 +106,22 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
106106 size="sm"
107107 variant="ghost"
108108 className={cn(
109 "min-w-0 shrink-0 whitespace-nowrap px-2 text-muted-foreground/70 hover:text-foreground/80",
110 props.compact ? "max-w-42" : "sm:px-3",
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 shrink-0" : "max-w-48 shrink sm:max-w-56 sm:px-3",
111111 )}
112112 disabled={props.disabled}
113113 />
114114 }
115115 >
116116 <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 )}
118121 >
119122 <ProviderIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground/70" />
120 <span className="truncate">{selectedModelLabel}</span>
121 <ChevronDownIcon aria-hidden="true" className="size-3 opacity-60" />
123 <span className="min-w-0 flex-1 truncate">{selectedModelLabel}</span>
124 <ChevronDownIcon aria-hidden="true" className="size-3 shrink-0 opacity-60" />
122125 </span>
123126 </MenuTrigger>
124127 <MenuPopup align="start">