From 9b59a22a431dc58711e0cbd99599574c8337bda4 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 18:22:15 -0800
Subject: [PATCH] stretch header buttons to fill height, add gap between
 accessories

---
 src/lib/components/ui/PaneStack.svelte     |  8 +++++++-
 src/lib/components/ui/SidebarHeader.svelte | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/PaneStack.svelte b/src/lib/components/ui/PaneStack.svelte
index 68e71ced..2aa49b27 100644
--- a/src/lib/components/ui/PaneStack.svelte
+++ b/src/lib/components/ui/PaneStack.svelte
@@ -113,7 +113,7 @@
 					{/if}
 					{#if pane.overflowMenu && pane.overflowMenu.length > 0}
 						<DropdownMenu.Root>
-							<DropdownMenu.Trigger>
+							<DropdownMenu.Trigger class="overflow-trigger">
 								{#snippet child({ props })}
 									<Button
 										{...props}
@@ -287,6 +287,12 @@
 		}
 	}
 
+	// Overflow trigger - reset any default styles from bits-ui
+	:global(.overflow-trigger) {
+		all: unset;
+		display: flex;
+	}
+
 	// Overflow menu styles
 	:global(.overflow-menu) {
 		background: var(--menu-bg, white);
diff --git a/src/lib/components/ui/SidebarHeader.svelte b/src/lib/components/ui/SidebarHeader.svelte
index e58fd685..3f629a58 100644
--- a/src/lib/components/ui/SidebarHeader.svelte
+++ b/src/lib/components/ui/SidebarHeader.svelte
@@ -41,7 +41,7 @@
 		display: grid;
 		grid-template-columns: 1fr auto 1fr;
 		align-items: center;
-		padding: $unit-2x;
+		padding: $unit;
 		border-bottom: 1px solid var(--border-primary);
 		flex-shrink: 0;
 		background: var(--bg-primary);
@@ -55,6 +55,16 @@
 		.header-right {
 			display: flex;
 			align-items: center;
+
+			// Ensure all buttons in header have consistent height
+			:global([data-button-root]) {
+				height: calc($unit * 4) !important;
+
+				// Icon-only buttons should be square
+				&.iconOnly {
+					width: calc($unit * 4) !important;
+				}
+			}
 		}
 
 		.header-left {
@@ -63,6 +73,7 @@
 
 		.header-right {
 			justify-content: flex-end;
+			gap: $unit-half;
 		}
 
 		.sidebar-title {