From 981b94fa56372f7d7415a3deca4552f84142c1b0 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 16 Apr 2026 20:30:16 +0700
Subject: [PATCH] fix(app): balance composer right-side button spacing

Tightens transparent icon gaps to 4px and gives filled action buttons
(send, interrupt) a 4px left margin so they sit 8px from neighbors.
Shrinks context-window meter SVG from 20 to 16 to match the visual
weight of surrounding icons.
---
 packages/app/src/components/composer.tsx             | 3 ++-
 packages/app/src/components/context-window-meter.tsx | 2 +-
 packages/app/src/components/message-input.tsx        | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/composer.tsx b/packages/app/src/components/composer.tsx
index 5b1664c1c..d7ff5f402 100644
--- a/packages/app/src/components/composer.tsx
+++ b/packages/app/src/components/composer.tsx
@@ -840,11 +840,12 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     backgroundColor: theme.colors.palette.red[600],
     alignItems: "center",
     justifyContent: "center",
+    marginLeft: theme.spacing[1],
   },
   rightControls: {
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing[2],
+    gap: theme.spacing[1],
   },
   contextWindowMeterSlot: {
     width: 28,
diff --git a/packages/app/src/components/context-window-meter.tsx b/packages/app/src/components/context-window-meter.tsx
index 7b8f12c30..9e7576aaf 100644
--- a/packages/app/src/components/context-window-meter.tsx
+++ b/packages/app/src/components/context-window-meter.tsx
@@ -8,7 +8,7 @@ type ContextWindowMeterProps = {
   usedTokens: number;
 };
 
-const SVG_SIZE = 20;
+const SVG_SIZE = 16;
 const CENTER = SVG_SIZE / 2;
 const RADIUS = 7;
 const STROKE_WIDTH = 2.25;
diff --git a/packages/app/src/components/message-input.tsx b/packages/app/src/components/message-input.tsx
index d853378a0..3f82fd226 100644
--- a/packages/app/src/components/message-input.tsx
+++ b/packages/app/src/components/message-input.tsx
@@ -1365,7 +1365,7 @@ const styles = StyleSheet.create(((theme: any) => ({
     flexShrink: 0,
     flexDirection: "row",
     alignItems: "center",
-    gap: isWeb ? theme.spacing[2] : theme.spacing[1],
+    gap: theme.spacing[1],
   },
   attachButton: {
     width: 28,
@@ -1399,6 +1399,7 @@ const styles = StyleSheet.create(((theme: any) => ({
     backgroundColor: theme.colors.accent,
     alignItems: "center",
     justifyContent: "center",
+    marginLeft: theme.spacing[1],
   },
   iconButtonHovered: {
     backgroundColor: theme.colors.surface2,