From b62c63ac546d1d8022de871f00f44444676f2434 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 7 Nov 2025 15:46:37 +0000
Subject: [PATCH] fix: use container queries for responsive chat controls

Replace viewport-based media queries with CSS container queries so chat
controls compact based on actual available space, not window size.

Fixes issue where controls don't compact when dev tools are open.
---
 src/components/ChatInput.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index bfe13a27b..015123fc4 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -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
@@ -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} />
@@ -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",
@@ -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>