From f2e24e26a161c83aade18fe3e694ffd7b31b4711 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sun, 23 Nov 2025 16:34:58 -0600
Subject: [PATCH] fix: reduce theme toggle button and title bar spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce toggle button from 28px to 20px (h-7 → h-5)
- Reduce icon from 16px to 14px (h-4 → h-3.5)
- Reduce title bar vertical padding from py-2 to py-1
- Restores compact layout while retaining theme toggle feature
---
 src/browser/components/ThemeToggleButton.tsx | 4 ++--
 src/browser/components/TitleBar.tsx          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/ThemeToggleButton.tsx b/src/browser/components/ThemeToggleButton.tsx
index 9adca9b4c1..cf189bbfde 100644
--- a/src/browser/components/ThemeToggleButton.tsx
+++ b/src/browser/components/ThemeToggleButton.tsx
@@ -12,11 +12,11 @@ export function ThemeToggleButton() {
       <button
         type="button"
         onClick={toggleTheme}
-        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
+        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-5 w-5 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
         aria-label={label}
         data-testid="theme-toggle"
       >
-        <Icon className="h-4 w-4" aria-hidden />
+        <Icon className="h-3.5 w-3.5" aria-hidden />
       </button>
       <Tooltip align="right">{label}</Tooltip>
     </TooltipWrapper>
diff --git a/src/browser/components/TitleBar.tsx b/src/browser/components/TitleBar.tsx
index 85bc84215f..6b11663360 100644
--- a/src/browser/components/TitleBar.tsx
+++ b/src/browser/components/TitleBar.tsx
@@ -220,7 +220,7 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="bg-dark border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-[11px] select-none">
+    <div className="bg-dark border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 py-1 text-[11px] select-none">
       <div className="mr-4 flex min-w-0 items-center gap-2">
         {showUpdateIndicator && (
           <TooltipWrapper>