From 694a95d84b0b7df6ab59748bd95092c66b5a6355 Mon Sep 17 00:00:00 2001 From: Ammar Date: Fri, 24 Oct 2025 13:54:51 -0500 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=A4=96=20Refine=20chat=20controls=20s?= =?UTF-8?q?pacing=20and=20visibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Standardize all internal gaps to gap-1.5 for consistency - Remove 'Context' suffix from 1M checkbox (now just '1M') - Make mode toggles hide more aggressively (550px instead of 700px) to prevent wrapping instead of using arbitrary breakpoint --- 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 9f076d6c8..212a01f16 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -749,7 +749,7 @@ export const ChatInput: React.FC = ({ )}
{/* Model Selector - always visible */} -
+
= ({
-
+
= ({ modelStrin
? diff --git a/src/components/ThinkingSlider.tsx b/src/components/ThinkingSlider.tsx index 56b9bc412..93f822e81 100644 --- a/src/components/ThinkingSlider.tsx +++ b/src/components/ThinkingSlider.tsx @@ -95,7 +95,7 @@ export const ThinkingSliderComponent: React.FC = ({ modelS return ( -
+
= ({ modelS return ( -
+
Date: Fri, 24 Oct 2025 14:02:36 -0500 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=A4=96=20Increase=20mode=20toggle=20h?= =?UTF-8?q?ide=20breakpoint=20to=20800px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 550px was too conservative - mode toggles were still wrapping. 800px ensures they hide before wrapping occurs in most cases. --- 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 212a01f16..820cc5037 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -789,7 +789,7 @@ export const ChatInput: React.FC = ({
-
+
Date: Fri, 24 Oct 2025 14:15:34 -0500 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A4=96=20Replace=20flex=20with=20CSS?= =?UTF-8?q?=20Grid=20for=20chat=20controls=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use CSS Grid with [1fr auto] columns to prevent unwanted wrapping: - Left column: Model controls (wraps internally with gap-x-3 gap-y-2) - Right column: Mode toggles (fixed width, stays right-aligned) - Mode toggles hide at 500px container width instead of arbitrary 800px This ensures mode toggles never wrap to a new line alongside model controls - they stay in their own column until hidden on narrow viewports. --- src/components/ChatInput.tsx | 85 +++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 40 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 820cc5037..89a9f8dfd 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -747,49 +747,54 @@ export const ChatInput: React.FC = ({ Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
)} -
- {/* Model Selector - always visible */} -
- 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) - - -
+
+ {/* Left column: Model controls */} +
+ {/* Model Selector - always visible */} +
+ 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 - hide on small viewports */} -
- -
+ {/* Thinking Slider - hide on small viewports */} +
+ +
- {/* Context 1M Checkbox - hide on smaller viewports */} -
- + {/* Context 1M Checkbox - hide on smaller viewports */} +
+ +
-
+ + {/* Right column: Mode toggles */} +
Date: Fri, 24 Oct 2025 14:19:15 -0500 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A4=96=20Fix=20formatting=20and=20lin?= =?UTF-8?q?ting=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChatInput.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 89a9f8dfd..cef1b0a94 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -749,7 +749,7 @@ export const ChatInput: React.FC = ({ )}
{/* Left column: Model controls */} -
+
{/* Model Selector - always visible */}
= ({ ? - Click to edit or use {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)} + Click to edit or use{" "} + {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}

Abbreviations: