From 63eb9ed67611d5fc3cab90d306aa0f12bef85f4e Mon Sep 17 00:00:00 2001
From: Mng <50384638+Mng-dev-ai@users.noreply.github.com>
Date: Sun, 22 Feb 2026 00:53:04 +0200
Subject: [PATCH] Reduce font size and icon sizes in the input bar for a more
 compact look

---
 .../components/chat/message-input/AttachButton.tsx |  2 +-
 .../chat/message-input/ContextUsageIndicator.tsx   |  4 ++--
 .../chat/message-input/EnhanceButton.tsx           |  2 +-
 .../components/chat/message-input/SendButton.tsx   |  6 +++---
 .../src/components/chat/message-input/Textarea.tsx |  2 +-
 .../chat/model-selector/ModelSelector.tsx          |  2 +-
 .../PermissionModeSelector.tsx                     |  2 +-
 .../ThinkingModeSelector.tsx                       |  2 +-
 frontend/src/components/ui/primitives/Dropdown.tsx | 14 +++++++-------
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/chat/message-input/AttachButton.tsx b/frontend/src/components/chat/message-input/AttachButton.tsx
index 207ebd88..5ca2214b 100644
--- a/frontend/src/components/chat/message-input/AttachButton.tsx
+++ b/frontend/src/components/chat/message-input/AttachButton.tsx
@@ -14,7 +14,7 @@ export function AttachButton({ onAttach }: AttachButtonProps) {
       className="rounded-full p-1.5 text-text-tertiary transition-colors duration-200 hover:bg-surface-hover hover:text-text-primary active:scale-95 dark:text-text-dark-tertiary dark:hover:bg-surface-dark-hover dark:hover:text-text-dark-primary"
       aria-label="Attach file"
     >
-      <Image className="h-4 w-4" />
+      <Image className="h-3.5 w-3.5" />
     </Button>
   );
 }
diff --git a/frontend/src/components/chat/message-input/ContextUsageIndicator.tsx b/frontend/src/components/chat/message-input/ContextUsageIndicator.tsx
index dd7802ff..3ee5b900 100644
--- a/frontend/src/components/chat/message-input/ContextUsageIndicator.tsx
+++ b/frontend/src/components/chat/message-input/ContextUsageIndicator.tsx
@@ -37,11 +37,11 @@ export const ContextUsageIndicator = ({ usage }: { usage: ContextUsageInfo }) =>
 
   return (
     <div
-      className="flex select-none items-center gap-1.5 text-xs text-text-secondary dark:text-text-dark-secondary"
+      className="flex select-none items-center gap-1 text-2xs text-text-secondary dark:text-text-dark-secondary"
       title={tooltip}
     >
       <span className="font-medium tabular-nums">{formattedPercentage}%</span>
-      <svg viewBox="0 0 24 24" className="h-6 w-6" role="presentation" aria-hidden="true">
+      <svg viewBox="0 0 24 24" className="h-5 w-5" role="presentation" aria-hidden="true">
         <circle
           cx="12"
           cy="12"
diff --git a/frontend/src/components/chat/message-input/EnhanceButton.tsx b/frontend/src/components/chat/message-input/EnhanceButton.tsx
index 46038fc7..02ecb4e8 100644
--- a/frontend/src/components/chat/message-input/EnhanceButton.tsx
+++ b/frontend/src/components/chat/message-input/EnhanceButton.tsx
@@ -26,7 +26,7 @@ export function EnhanceButton({
       aria-label={isEnhancing ? 'Enhancing prompt\u2026' : 'Enhance prompt'}
       title={isEnhancing ? 'Enhancing prompt\u2026' : 'Enhance prompt with AI'}
     >
-      <Sparkles className={`h-3.5 w-3.5 ${isEnhancing ? 'animate-spin' : ''}`} />
+      <Sparkles className={`h-3 w-3 ${isEnhancing ? 'animate-spin' : ''}`} />
     </Button>
   );
 }
diff --git a/frontend/src/components/chat/message-input/SendButton.tsx b/frontend/src/components/chat/message-input/SendButton.tsx
index 1f9a2b1b..cc48b951 100644
--- a/frontend/src/components/chat/message-input/SendButton.tsx
+++ b/frontend/src/components/chat/message-input/SendButton.tsx
@@ -54,16 +54,16 @@ export function SendButton({
   const renderIcon = () => {
     if (showSpinnerIcon) {
       return (
-        <LoaderCircle className="h-4 w-4 animate-spin text-text-dark-primary dark:text-text-primary" />
+        <LoaderCircle className="h-3.5 w-3.5 animate-spin text-text-dark-primary dark:text-text-primary" />
       );
     }
 
     if (showStopIcon) {
-      return <Pause className="h-3.5 w-3.5 animate-pulse text-text-dark-primary" />;
+      return <Pause className="h-3 w-3 animate-pulse text-text-dark-primary" />;
     }
     return (
       <ArrowUp
-        className={`h-4 w-4 transition-transform ${hasMessage ? 'text-text-dark-primary dark:text-text-primary' : 'text-text-quaternary'}`}
+        className={`h-3.5 w-3.5 transition-transform ${hasMessage ? 'text-text-dark-primary dark:text-text-primary' : 'text-text-quaternary'}`}
       />
     );
   };
diff --git a/frontend/src/components/chat/message-input/Textarea.tsx b/frontend/src/components/chat/message-input/Textarea.tsx
index ce10358e..6055f819 100644
--- a/frontend/src/components/chat/message-input/Textarea.tsx
+++ b/frontend/src/components/chat/message-input/Textarea.tsx
@@ -116,7 +116,7 @@ export function Textarea({
       placeholder={placeholder}
       disabled={isLoading}
       rows={1}
-      className={`max-h-[180px] w-full resize-none overflow-y-auto bg-transparent py-1.5 pr-14 text-sm leading-normal text-text-primary outline-none transition-all duration-200 placeholder:text-text-quaternary focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary ${isMobile && compact ? 'min-h-[28px]' : 'min-h-[80px]'}`}
+      className={`max-h-[180px] w-full resize-none overflow-y-auto bg-transparent py-1.5 pr-14 text-xs leading-normal text-text-primary outline-none transition-all duration-200 placeholder:text-text-quaternary focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary ${isMobile && compact ? 'min-h-[28px]' : 'min-h-[80px]'}`}
       style={THIN_SCROLLBAR_STYLE}
       aria-label="Message input"
     />
diff --git a/frontend/src/components/chat/model-selector/ModelSelector.tsx b/frontend/src/components/chat/model-selector/ModelSelector.tsx
index 99eef6e6..644d2e21 100644
--- a/frontend/src/components/chat/model-selector/ModelSelector.tsx
+++ b/frontend/src/components/chat/model-selector/ModelSelector.tsx
@@ -97,7 +97,7 @@ export const ModelSelector = memo(function ModelSelector({
       searchPlaceholder="Search models..."
       renderItem={(model, isSelected) => (
         <span
-          className={`truncate text-xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
+          className={`truncate text-2xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
         >
           {model.name}
         </span>
diff --git a/frontend/src/components/chat/permission-mode-selector/PermissionModeSelector.tsx b/frontend/src/components/chat/permission-mode-selector/PermissionModeSelector.tsx
index 7924d581..4e51e40f 100644
--- a/frontend/src/components/chat/permission-mode-selector/PermissionModeSelector.tsx
+++ b/frontend/src/components/chat/permission-mode-selector/PermissionModeSelector.tsx
@@ -47,7 +47,7 @@ export const PermissionModeSelector = memo(function PermissionModeSelector({
       renderItem={(mode, isSelected) => (
         <>
           <span
-            className={`text-xs font-medium text-text-primary ${isSelected ? 'dark:text-text-dark-primary' : 'dark:text-text-dark-secondary'}`}
+            className={`text-2xs font-medium text-text-primary ${isSelected ? 'dark:text-text-dark-primary' : 'dark:text-text-dark-secondary'}`}
           >
             {mode.label}
           </span>
diff --git a/frontend/src/components/chat/thinking-mode-selector/ThinkingModeSelector.tsx b/frontend/src/components/chat/thinking-mode-selector/ThinkingModeSelector.tsx
index 4fdc33e4..d1139340 100644
--- a/frontend/src/components/chat/thinking-mode-selector/ThinkingModeSelector.tsx
+++ b/frontend/src/components/chat/thinking-mode-selector/ThinkingModeSelector.tsx
@@ -47,7 +47,7 @@ export const ThinkingModeSelector = memo(function ThinkingModeSelector({
       renderItem={(mode, isSelected) => (
         <div className="flex w-full items-center justify-between gap-3">
           <span
-            className={`text-xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
+            className={`text-2xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
           >
             {mode.label}
           </span>
diff --git a/frontend/src/components/ui/primitives/Dropdown.tsx b/frontend/src/components/ui/primitives/Dropdown.tsx
index c5d8aa62..902be30d 100644
--- a/frontend/src/components/ui/primitives/Dropdown.tsx
+++ b/frontend/src/components/ui/primitives/Dropdown.tsx
@@ -124,9 +124,9 @@ function DropdownInner<T>({
   const showIconOnly = (compactOnMobile || forceCompact) && LeftIcon;
   const labelClasses = showIconOnly
     ? forceCompact
-      ? 'hidden whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary'
-      : 'hidden lg:inline whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary'
-    : 'whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary';
+      ? 'hidden whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary'
+      : 'hidden lg:inline whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary'
+    : 'whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary';
   const chevronClasses = showIconOnly
     ? forceCompact
       ? 'hidden'
@@ -146,7 +146,7 @@ function DropdownInner<T>({
       >
         {LeftIcon && (
           <LeftIcon
-            className={`h-3.5 w-3.5 text-text-tertiary dark:text-text-dark-tertiary${forceCompact ? '' : 'lg:hidden'}`}
+            className={`h-3 w-3 text-text-tertiary dark:text-text-dark-tertiary${forceCompact ? '' : 'lg:hidden'}`}
           />
         )}
         <span className={labelClasses}>
@@ -171,7 +171,7 @@ function DropdownInner<T>({
                   onKeyDown={handleSearchKeyDown}
                   placeholder={searchPlaceholder}
                   autoFocus={!isMobile}
-                  className="h-7 w-full rounded-lg border border-border bg-surface-tertiary py-1 pl-7 pr-7 text-xs text-text-primary transition-colors duration-200 placeholder:text-text-quaternary focus:border-border-hover focus:outline-none dark:border-border-dark dark:bg-surface-dark-tertiary dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary dark:focus:border-border-dark-hover"
+                  className="h-7 w-full rounded-lg border border-border bg-surface-tertiary py-1 pl-7 pr-7 text-2xs text-text-primary transition-colors duration-200 placeholder:text-text-quaternary focus:border-border-hover focus:outline-none dark:border-border-dark dark:bg-surface-dark-tertiary dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary dark:focus:border-border-dark-hover"
                 />
                 {searchQuery && (
                   <Button
@@ -220,7 +220,7 @@ function DropdownInner<T>({
                           renderItem(item.data, isSelected)
                         ) : (
                           <span
-                            className={`text-xs font-medium ${
+                            className={`text-2xs font-medium ${
                               isSelected
                                 ? 'text-text-primary dark:text-text-dark-primary'
                                 : 'text-text-secondary dark:text-text-dark-secondary'
@@ -254,7 +254,7 @@ function DropdownInner<T>({
                           renderItem(item, isSelected)
                         ) : (
                           <span
-                            className={`text-xs font-medium ${
+                            className={`text-2xs font-medium ${
                               isSelected
                                 ? 'text-text-primary dark:text-text-dark-primary'
                                 : 'text-text-secondary dark:text-text-dark-secondary'