🤖 Refine chat controls spacing and visibility

- 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

Author: ammar-agent

src/components/ChatInput.tsx

@@ -749,7 +749,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         )}
         <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
           {/* Model Selector - always visible */}
-          <div className="flex items-center" data-component="ModelSelectorGroup">
+          <div className="flex items-center gap-1.5" data-component="ModelSelectorGroup">
             <ModelSelector
               ref={modelSelectorRef}
               value={preferredModel}
@@ -789,7 +789,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           <div className="max-@[500px]:hidden flex items-center" data-component="Context1MGroup">
             <Context1MCheckbox modelString={preferredModel} />
           </div>
-          <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
+          <div className="max-@[550px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
                 "flex gap-0 bg-toggle-bg rounded",

src/components/Context1MCheckbox.tsx

@@ -19,7 +19,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
     <div className="flex items-center gap-1.5">
       <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
         <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
-        1M Context
+        1M
       </label>
       <TooltipWrapper inline>
         <span className="text-muted flex cursor-help items-center text-[10px] leading-none">?</span>

src/components/ThinkingSlider.tsx

@@ -95,7 +95,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
     return (
       <TooltipWrapper>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
           <span
             className="min-w-11 uppercase transition-all duration-200 select-none"
             style={textStyle}
@@ -126,7 +126,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
   return (
     <TooltipWrapper>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1.5">
         <input
           type="range"
           min="0"