From 21f2b28bf063eeee7ac5786851a979d19fc40cf6 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 12 Dec 2025 02:37:18 +0100
Subject: [PATCH] fix(shared-ui): improve PillNavigation and PillDropdown
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix PillNavigation styling and spacing
- Improve PillDropdown animation and positioning
- Adjust PillToolbar for better responsiveness
- Fix PillTimeRangeSelector hour selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/navigation/PillDropdown.svelte        | 18 +++++++++++--
 .../src/navigation/PillNavigation.svelte      | 26 +++++++++++++++++++
 .../navigation/PillTimeRangeSelector.svelte   |  1 -
 .../src/navigation/PillToolbar.svelte         |  9 ++-----
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index c4e4a1481..3bc390a96 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -13,6 +13,8 @@
 		header?: Snippet;
 		/** Optional footer content (e.g., a11y toggles) */
 		footer?: Snippet;
+		/** Show only the icon without label */
+		iconOnly?: boolean;
 	}
 
 	let {
@@ -24,6 +26,7 @@
 		onToggle,
 		header,
 		footer,
+		iconOnly = false,
 	}: Props = $props();
 
 	let internalOpen = $state(false);
@@ -123,13 +126,20 @@
 
 <div class="pill-dropdown">
 	<!-- Trigger Button -->
-	<button bind:this={triggerButton} onclick={toggle} class="pill glass-pill trigger-button">
+	<button
+		bind:this={triggerButton}
+		onclick={toggle}
+		class="pill glass-pill trigger-button"
+		class:icon-only={iconOnly}
+	>
 		{#if icon}
 			<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIcon(icon)} />
 			</svg>
 		{/if}
-		<span class="pill-label">{label}</span>
+		{#if !iconOnly}
+			<span class="pill-label">{label}</span>
+		{/if}
 		<svg
 			class="chevron-icon"
 			class:rotated={open}
@@ -281,6 +291,10 @@
 		z-index: 10;
 	}
 
+	.trigger-button.icon-only {
+		padding: 0.5rem 0.625rem;
+	}
+
 	.chevron-icon {
 		width: 0.75rem;
 		height: 0.75rem;
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 8aa8b0482..ecf1344e9 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -27,6 +27,7 @@
 		Tray,
 		Check,
 		CheckCircle,
+		CheckSquare,
 		Plus,
 		Columns,
 		Microphone,
@@ -73,6 +74,7 @@
 		inbox: Tray,
 		check: Check,
 		checkCircle: CheckCircle,
+		'check-square': CheckSquare,
 		plus: Plus,
 		columns: Columns,
 		kanban: Columns,
@@ -84,6 +86,7 @@
 		music: MusicNote,
 		document: File,
 		chart: ChartBar,
+		'bar-chart-3': ChartBar,
 		search: MagnifyingGlass,
 		list: List,
 		compass: Compass,
@@ -443,6 +446,7 @@
 					direction={dropdownDirection}
 					label={appName}
 					icon="grid"
+					iconOnly={!isSidebarMode}
 				/>
 			{:else}
 				<a href={homeRoute} class="pill glass-pill logo-pill">
@@ -853,6 +857,9 @@
 		z-index: 1000;
 		padding: 0.75rem 0 1.5rem;
 		pointer-events: none;
+		/* Container query context */
+		container-type: inline-size;
+		container-name: pillnav;
 	}
 
 	/* Desktop bottom position */
@@ -882,6 +889,25 @@
 		-ms-overflow-style: none;
 		pointer-events: auto;
 		padding: 0.5rem 2rem;
+		/* Default: left-aligned with fit-content */
+		width: fit-content;
+		max-width: 100%;
+	}
+
+	/* Center when container has enough space (> 600px) */
+	@container pillnav (min-width: 600px) {
+		.pill-nav-container:not(.sidebar-container) {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+
+	/* Larger screens: always centered */
+	@container pillnav (min-width: 900px) {
+		.pill-nav-container:not(.sidebar-container) {
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	.pill-nav-container::-webkit-scrollbar {
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
index 806977d1f..3c9c4c3ba 100644
--- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
@@ -174,7 +174,6 @@
 
 	.trigger-button {
 		position: relative;
-		z-index: 10;
 	}
 
 	.pill {
diff --git a/packages/shared-ui/src/navigation/PillToolbar.svelte b/packages/shared-ui/src/navigation/PillToolbar.svelte
index f702e3d18..f497d5cab 100644
--- a/packages/shared-ui/src/navigation/PillToolbar.svelte
+++ b/packages/shared-ui/src/navigation/PillToolbar.svelte
@@ -39,7 +39,7 @@
 		top: var(--toolbar-top-offset, 70px);
 		left: 0;
 		right: 0;
-		z-index: 999;
+		z-index: 50;
 		padding: 0.375rem 1rem;
 		pointer-events: none;
 		display: flex;
@@ -68,12 +68,7 @@
 		padding: 0.25rem;
 		pointer-events: auto;
 		max-width: 100%;
-		overflow-x: auto;
-		scrollbar-width: none;
-	}
-
-	.toolbar-bar::-webkit-scrollbar {
-		display: none;
+		overflow: visible;
 	}
 
 	.glass-pill {