From 613039c7820722bd9e47763c21b3a1da6070fd43 Mon Sep 17 00:00:00 2001 From: Ammar Date: Fri, 24 Oct 2025 10:32:12 -0500 Subject: [PATCH 01/16] =?UTF-8?q?=F0=9F=A4=96=20Fix=20chat=20controls=20wr?= =?UTF-8?q?apping=20on=20constrained=20viewports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added flex-wrap to the chat controls row to prevent overflow on narrow viewports. Controls (ModelSelector, ThinkingSlider, Context1MCheckbox, and mode toggles) now wrap to multiple lines when space is constrained instead of overflowing horizontally. Changes: - Added flex-wrap and gap-y-1 to controls container - Controls maintain proper alignment while allowing responsive wrapping --- src/components/ChatInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 6ec09c3b6..e650b3f52 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -746,7 +746,7 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel) )} -
+
Date: Fri, 24 Oct 2025 10:51:18 -0500 Subject: [PATCH 02/16] =?UTF-8?q?=F0=9F=A4=96=20Decompose=20chat=20control?= =?UTF-8?q?s=20for=20proper=20shrinking=20behavior?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed ChatToggles wrapper and decomposed into individual components with explicit flex behavior: - ModelSelectorGroup: flex shrink (can compress) - ThinkingSliderGroup: flex shrink-0 (fixed width) - Context1MGroup: flex shrink-0 (fixed width) - Mode toggles: ml-auto (pushes to right) Each component now has: - data-component attribute for debugging - Explicit shrink behavior (shrink vs shrink-0) - Proper gap-x-3 spacing between items - gap-y-1 for wrapped rows This allows proper wrapping and compression on constrained viewports. --- src/components/ChatInput.tsx | 73 ++++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index e650b3f52..2cf2660ce 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -7,7 +7,8 @@ import { createCommandToast, createErrorToast } from "./ChatInputToasts"; import { parseCommand } from "@/utils/slashCommands/parser"; import { usePersistedState, updatePersistedState } from "@/hooks/usePersistedState"; import { useMode } from "@/contexts/ModeContext"; -import { ChatToggles } from "./ChatToggles"; +import { ThinkingSliderComponent } from "./ThinkingSlider"; +import { Context1MCheckbox } from "./Context1MCheckbox"; import { useSendMessageOptions } from "@/hooks/useSendMessageOptions"; import { getModelKey, getInputKey } from "@/constants/storage"; import { @@ -746,37 +747,45 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
)} -
- -
- inputRef.current?.focus()} - /> - - ? - - Click to edit or use{" "} - {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} -
-
- Abbreviations: -
• /model opus - Claude Opus 4.1 -
• /model sonnet - Claude Sonnet 4.5 -
-
- Full format: -
- /model provider:model-name -
- (e.g., /model anthropic:claude-sonnet-4-5) - - -
- +
+ {/* Model Selector */} +
+ inputRef.current?.focus()} + /> + + ? + + Click to edit or use {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} +
+
+ Abbreviations: +
• /model opus - Claude Opus 4.1 +
• /model sonnet - Claude Sonnet 4.5 +
+
+ Full format: +
+ /model provider:model-name +
+ (e.g., /model anthropic:claude-sonnet-4-5) + + +
+ + {/* Thinking Slider */} +
+ +
+ + {/* Context 1M Checkbox */} +
+ +
Date: Fri, 24 Oct 2025 10:53:01 -0500 Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=A4=96=20Add=20min-w-0=20to=20flex?= =?UTF-8?q?=20items=20to=20allow=20proper=20shrinking?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added min-w-0 to all flex container and items to override the default min-width:auto behavior that prevents flex items from shrinking below their content size. Without min-w-0: - Flex items have min-width: auto (content-based minimum) - Items can't shrink below their content width - flex-wrap doesn't trigger because items won't compress With min-w-0: - Flex items can shrink below content size - Wrapping triggers when container width is constrained - Items properly respond to viewport constraints --- src/components/ChatInput.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 2cf2660ce..f67845869 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -747,9 +747,12 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
)} -
+
{/* Model Selector */} -
+
= ({
{/* Thinking Slider */} -
+
{/* Context 1M Checkbox */} -
+
From f544ce0749bfc7f49edb20dc1ceb06161a98992d Mon Sep 17 00:00:00 2001 From: Ammar Date: Fri, 24 Oct 2025 11:01:00 -0500 Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=A4=96=20Use=20overflow-x-auto=20an?= =?UTF-8?q?d=20progressive=20hiding=20instead=20of=20wrapping?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changed approach from flex-wrap to overflow scrolling with progressive hiding of controls on smaller viewports: - Parent container: overflow-x-auto (allows horizontal scroll as last resort) - ModelSelector: always visible, pr-3 spacing - ThinkingSlider: hidden below 600px (@container width) - Context1M: hidden below 500px (@container width) - Mode toggles: hidden below 700px (@container width, existing) This approach: - Prevents awkward wrapping with hardcoded component margins (ml-5, ml-2) - Progressively removes less critical controls on narrow viewports - Allows horizontal scroll if all else fails - Respects existing component layouts --- src/components/ChatInput.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index f67845869..bb010f6f5 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -747,10 +747,10 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
)} -
- {/* Model Selector */} +
+ {/* Model Selector - always visible */}
= ({
- {/* Thinking Slider */} -
+ {/* Thinking Slider - hide on small viewports */} +
- {/* Context 1M Checkbox */} -
+ {/* Context 1M Checkbox - hide on smaller viewports */} +
From e251b1102a3693074cca3eb6e99a847109c119da Mon Sep 17 00:00:00 2001 From: Ammar Date: Fri, 24 Oct 2025 11:03:54 -0500 Subject: [PATCH 05/16] =?UTF-8?q?=F0=9F=A4=96=20Simplify=20chat=20controls?= =?UTF-8?q?=20to=20use=20idiomatic=20flex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove hardcoded margins from ThinkingSlider and Context1MCheckbox, let parent container handle spacing with gap-3. This makes the layout more responsive and easier to reason about. - ThinkingSlider: ml-5 → handled by parent gap - Context1MCheckbox: ml-2 → handled by parent gap - ChatInput: pr-3 on child → gap-3 on parent --- src/components/ChatInput.tsx | 4 ++-- src/components/Context1MCheckbox.tsx | 2 +- src/components/ThinkingSlider.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index bb010f6f5..7aff763ac 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -747,10 +747,10 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
)} -
+
{/* Model Selector - always visible */}
= ({ modelStrin } return ( -
+