From a32c4f0a164852793798b35d1c9b84af1805842d Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 29 Nov 2025 22:29:04 +0100
Subject: [PATCH] fix(shared-ui): fix theme mode selector styling in dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use solid background instead of backdrop-filter blur (not working in dropdown context)
- Add global glass-pill styles for elements in fan-container
- Light mode: solid light gray background
- Dark mode: solid dark gray background

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/navigation/PillDropdown.svelte          |  6 ++++--
 .../src/navigation/PillNavigation.svelte        | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 54d191bd8..e54a9b43f 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -250,7 +250,8 @@
 		cursor: pointer;
 	}
 
-	.glass-pill {
+	.glass-pill,
+	:global(.fan-container .glass-pill) {
 		background: rgba(255, 255, 255, 0.85);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
@@ -261,7 +262,8 @@
 		color: #374151;
 	}
 
-	:global(.dark) .glass-pill {
+	:global(.dark) .glass-pill,
+	:global(.dark .fan-container .glass-pill) {
 		background: rgba(255, 255, 255, 0.12);
 		border: 1px solid rgba(255, 255, 255, 0.15);
 		color: #f3f4f6;
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 51249f83f..a9a1fa6e6 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -351,7 +351,7 @@
 					icon="palette"
 				>
 					{#snippet header()}
-						<div class="theme-mode-selector pill glass-pill">
+						<div class="theme-mode-selector glass-pill">
 							<button
 								type="button"
 								onclick={() => onThemeModeChange?.('light')}
@@ -908,10 +908,23 @@
 		transition: all 0.3s ease;
 	}
 
-	/* Theme mode selector in dropdown header - extends .pill.glass-pill */
+	/* Theme mode selector in dropdown header */
 	:global(.theme-mode-selector) {
+		display: flex !important;
+		align-items: center !important;
 		gap: 0.25rem !important;
 		padding: 0.25rem !important;
+		border-radius: 9999px !important;
+		background: rgba(245, 245, 245, 0.95) !important;
+		border: 1px solid rgba(0, 0, 0, 0.1) !important;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+		color: #374151 !important;
+	}
+
+	:global(.dark .theme-mode-selector) {
+		background: rgba(40, 40, 40, 0.95) !important;
+		border: 1px solid rgba(255, 255, 255, 0.15) !important;
+		color: #f3f4f6 !important;
 	}
 
 	:global(.mode-btn) {