Skip to content

fix: implement button overflow #1193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 4 commits into from
Mar 18, 2026
Merged

fix: implement button overflow #1193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
659e7cf
Fix composer footer button overflow behavior
UtkarshUsername Mar 18, 2026
215c6bf
Fix picker trigger label overflow in chat controls
UtkarshUsername Mar 18, 2026
96758d3
Fix traits picker trigger overflow in Fast mode
UtkarshUsername Mar 18, 2026
715d669
Fix Codex traits label overflow in fast mode button
UtkarshUsername Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/components/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand Down
25 changes: 16 additions & 9 deletions apps/web/src/components/chat/CodexTraitsPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
13 changes: 8 additions & 5 deletions apps/web/src/components/chat/ProviderModelPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down