From 635d52ca28e8a88727edbb2d01e0ccd0d9e58595 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 11 Mar 2026 22:48:10 -0500
Subject: [PATCH] Fix theme selector z-index and cap preset count in sidebar
 dropdowns

The theme dropdown was appearing behind the account popover because
DropdownMenuContent (z-200) portals below PopoverContent (z-260).
Bumped theme dropdown z-index to 270 so it renders above. Also capped
featured preset themes to 5 in both sidebar dropdowns to keep the menu
manageable, with a 'More...' link for the full list.
---
 src/components/LeftSidebar.tsx          | 4 ++--
 src/components/SidebarThemeDropdown.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx
index cdeeb739..5414141d 100644
--- a/src/components/LeftSidebar.tsx
+++ b/src/components/LeftSidebar.tsx
@@ -98,7 +98,7 @@ export function LeftSidebar() {
     { value: 'light', label: 'Light', icon: <Sun className="size-4" /> },
     { value: 'dark', label: 'Dark', icon: <Moon className="size-4" /> },
   ];
-  const presetOptions = Object.entries(themePresets).filter(([, p]) => p.featured).map(([id, p]) => ({ id, label: p.label, emoji: p.emoji }));
+  const presetOptions = Object.entries(themePresets).filter(([, p]) => p.featured).slice(0, 5).map(([id, p]) => ({ id, label: p.label, emoji: p.emoji }));
   const activePreset = theme === 'custom' && customTheme ? Object.entries(themePresets).find(([, p]) => JSON.stringify(p.colors) === JSON.stringify(customTheme)) : undefined;
   const sidebarUserThemes = useUserThemes(user?.pubkey);
   const activeUserTheme = theme === 'custom' && customTheme && !activePreset ? sidebarUserThemes.data?.find(t => JSON.stringify(t.colors) === JSON.stringify(customTheme)) : undefined;
@@ -333,7 +333,7 @@ export function LeftSidebar() {
                       <div className="flex items-center gap-2 text-muted-foreground">{currentThemeIcon}<span className="text-xs">{currentThemeLabel}</span><ChevronDown className="size-4" /></div>
                     </button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" side="top" className="w-48">
+                  <DropdownMenuContent align="end" side="top" className="w-48 z-[270]">
                     {builtinThemeOptions.map((opt) => (
                       <DropdownMenuItem key={opt.value} onClick={() => setTheme(opt.value)} className="flex items-center justify-between cursor-pointer">
                         <div className="flex items-center gap-2">{opt.icon}<span>{opt.label}</span></div>
diff --git a/src/components/SidebarThemeDropdown.tsx b/src/components/SidebarThemeDropdown.tsx
index ddade6dd..635283aa 100644
--- a/src/components/SidebarThemeDropdown.tsx
+++ b/src/components/SidebarThemeDropdown.tsx
@@ -29,6 +29,7 @@ export function SidebarThemeDropdown({ userPubkey, onNavigate, className }: Side
 
   const presetOptions = Object.entries(themePresets)
     .filter(([, p]) => p.featured)
+    .slice(0, 5)
     .map(([id, p]) => ({ id, label: p.label, emoji: p.emoji }));
 
   const activePreset = theme === 'custom' && customTheme
@@ -68,7 +69,7 @@ export function SidebarThemeDropdown({ userPubkey, onNavigate, className }: Side
           </div>
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" side="top" className="w-48">
+      <DropdownMenuContent align="end" side="top" className="w-48 z-[270]">
         {builtinOptions.map((opt) => (
           <DropdownMenuItem key={opt.value} onClick={() => setTheme(opt.value)} className="flex items-center justify-between cursor-pointer">
             <div className="flex items-center gap-2">{opt.icon}<span>{opt.label}</span></div>