Skip to content

🤖 fix: use container queries for responsive chat controls #526

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
merged 1 commit into from
Nov 7, 2025
+7 −7
Merged

🤖 fix: use container queries for responsive chat controls #526

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 7 additions & 7 deletions src/components/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
</div>
)}
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
<div className="@container flex flex-wrap items-center gap-x-3 gap-y-2">
{/* Model Selector - always visible */}
<div className="flex items-center" data-component="ModelSelectorGroup">
<ModelSelector
Expand Down Expand Up @@ -866,9 +866,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({
</TooltipWrapper>
</div>

{/* Thinking Slider - slider hidden on narrow viewports, label always clickable */}
{/* Thinking Slider - slider hidden on narrow containers, label always clickable */}
<div
className="flex items-center [&_.thinking-slider]:max-[550px]:hidden"
className="flex items-center [&_.thinking-slider]:[@container(max-width:550px)]:hidden"
data-component="ThinkingSliderGroup"
>
<ThinkingSliderComponent modelString={preferredModel} />
Expand Down Expand Up @@ -896,8 +896,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
</div>
)}

{/* Mode Switch - full version for wide viewports */}
<div className="ml-auto flex items-center gap-1.5 max-[550px]:hidden">
{/* Mode Switch - full version for wide containers */}
<div className="ml-auto flex items-center gap-1.5 [@container(max-width:550px)]:hidden">
<div
className={cn(
"flex gap-0 bg-toggle-bg rounded",
Expand All @@ -913,8 +913,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
<ModeHelpTooltip />
</div>

{/* Mode Switch - compact version for narrow viewports */}
<div className="ml-auto hidden items-center gap-1.5 max-[550px]:flex">
{/* Mode Switch - compact version for narrow containers */}
<div className="ml-auto hidden items-center gap-1.5 [@container(max-width:550px)]:flex">
<ToggleGroup<UIMode> options={MODE_OPTIONS} value={mode} onChange={setMode} compact />
<ModeHelpTooltip />
</div>
Expand Down