From ebf592353040479c96ce609dbea062fb76d638d3 Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Tue, 24 Mar 2026 00:40:31 +0100
Subject: [PATCH] fix: center header content with symmetric padding

Use pt-3 pb-3 (12px each) for symmetric vertical padding so content
is visually centered in every header bar.

To keep headers draggable, each header container gets the drag-region
class and all interactive elements (buttons) get the no-drag class.
The global fallback drag strip is reduced to h-3.
Title bar overlay reduced from 40px to 32px (standard Windows size).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/main/windows/createMainWindow.ts      |  2 +-
 src/renderer/components/ActivityPanel.tsx |  2 +-
 src/renderer/components/AppShell.tsx      |  2 +-
 src/renderer/components/ChatPane.tsx      |  2 +-
 src/renderer/components/PatternEditor.tsx |  6 +++---
 src/renderer/components/SettingsPanel.tsx | 10 +++++-----
 src/renderer/components/Sidebar.tsx       |  4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/main/windows/createMainWindow.ts b/src/main/windows/createMainWindow.ts
index e9d8788..7579be0 100644
--- a/src/main/windows/createMainWindow.ts
+++ b/src/main/windows/createMainWindow.ts
@@ -21,7 +21,7 @@ export function createMainWindow(): BrowserWindow {
     titleBarOverlay: {
       color: '#09090b',
       symbolColor: '#a1a1aa',
-      height: 40,
+      height: 32,
     },
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
diff --git a/src/renderer/components/ActivityPanel.tsx b/src/renderer/components/ActivityPanel.tsx
index 0a0175e..cc43d54 100644
--- a/src/renderer/components/ActivityPanel.tsx
+++ b/src/renderer/components/ActivityPanel.tsx
@@ -190,7 +190,7 @@ export function ActivityPanel({
   return (
     <div className="flex h-full flex-col">
       {/* Header — top padding clears the title bar overlay zone */}
-      <div className="border-b border-[var(--color-border)] px-4 pb-3 pt-12">
+      <div className="drag-region border-b border-[var(--color-border)] px-4 pb-3 pt-3">
         <div className="flex min-h-8 items-center gap-2">
           <Activity className="size-4 text-zinc-500" />
           <span className="text-[12px] font-semibold uppercase tracking-[0.12em] text-zinc-400">
diff --git a/src/renderer/components/AppShell.tsx b/src/renderer/components/AppShell.tsx
index 39bc568..237c2ba 100644
--- a/src/renderer/components/AppShell.tsx
+++ b/src/renderer/components/AppShell.tsx
@@ -11,7 +11,7 @@ export function AppShell({ sidebar, content, detailPanel, overlay }: AppShellPro
   return (
     <div className="relative flex h-screen bg-[var(--color-surface-0)] text-zinc-100">
       {/* Full-width drag region matching the title bar overlay height */}
-      <div className="drag-region absolute inset-x-0 top-0 z-10 h-10" />
+      <div className="drag-region absolute inset-x-0 top-0 z-10 h-3" />
 
       <aside className="flex w-72 shrink-0 flex-col border-r border-[var(--color-border)] bg-[var(--color-surface-1)]">
         {sidebar}
diff --git a/src/renderer/components/ChatPane.tsx b/src/renderer/components/ChatPane.tsx
index 3703180..01af758 100644
--- a/src/renderer/components/ChatPane.tsx
+++ b/src/renderer/components/ChatPane.tsx
@@ -313,7 +313,7 @@ export function ChatPane({
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
-      <header className="border-b border-[var(--color-border)] px-6 pb-3 pt-12">
+      <header className="drag-region border-b border-[var(--color-border)] px-6 pb-3 pt-3">
         <div className="flex min-h-8 items-center justify-between">
           <div className="min-w-0">
             <h2 className="truncate text-[13px] font-semibold leading-tight text-zinc-100">{session.title}</h2>
diff --git a/src/renderer/components/PatternEditor.tsx b/src/renderer/components/PatternEditor.tsx
index 6acdb64..b3de204 100644
--- a/src/renderer/components/PatternEditor.tsx
+++ b/src/renderer/components/PatternEditor.tsx
@@ -225,10 +225,10 @@ export function PatternEditor({
   return (
     <div className="flex h-full flex-col">
       {/* Header — consistent ← navigation */}
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-12">
+      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <div className="flex items-center gap-3">
           <button
-            className="flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
             onClick={onBack}
             type="button"
           >
@@ -243,7 +243,7 @@ export function PatternEditor({
             </p>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="no-drag flex items-center gap-2">
           {!isBuiltin && onDelete && (
             <button
               className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
diff --git a/src/renderer/components/SettingsPanel.tsx b/src/renderer/components/SettingsPanel.tsx
index c6b4144..d5df29c 100644
--- a/src/renderer/components/SettingsPanel.tsx
+++ b/src/renderer/components/SettingsPanel.tsx
@@ -178,9 +178,9 @@ export function SettingsPanel({
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col bg-[var(--color-surface-0)]">
-      <div className="flex items-center gap-3 border-b border-[var(--color-border)] px-5 pb-3 pt-12">
+      <div className="drag-region flex items-center gap-3 border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <button
-          className="flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+          className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
           onClick={onClose}
           type="button"
         >
@@ -727,10 +727,10 @@ function ToolingEditorShell({
 }) {
   return (
     <div className="flex h-full flex-col">
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-12">
+      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
         <div className="flex items-center gap-3">
           <button
-            className="flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
             onClick={onBack}
             type="button"
           >
@@ -741,7 +741,7 @@ function ToolingEditorShell({
             <p className="text-[12px] text-zinc-500">{subtitle}</p>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="no-drag flex items-center gap-2">
           {onDelete && (
             <button
               className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 4445e00..a204c0a 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -493,7 +493,7 @@ export function Sidebar({
   return (
     <div className="flex h-full flex-col">
       {/* Header — extra top padding clears the title bar overlay zone */}
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] px-4 pb-3 pt-12">
+      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-4 pb-3 pt-3">
         <div className="flex items-center gap-2.5">
           <div className="relative flex size-8 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-[12px] font-bold text-white shadow-lg shadow-indigo-500/20">
             <Sparkles className="size-4" />
@@ -507,7 +507,7 @@ export function Sidebar({
         </div>
         <div className="flex items-center gap-1">
           <button
-            className="flex size-8 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
             onClick={onOpenSettings}
             title="Settings"
             type="button"