GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix theme selector z-index and cap preset count in sidebar dropdowns

Browse Source 
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.
This commit is contained in:
Alex Gleason
2026-03-11 22:48:10 -05:00
parent b3b2e4f077
commit 635d52ca28
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LeftSidebar.tsx
+2 -2
View File
@@ -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>
src/components/SidebarThemeDropdown.tsx
+2 -1
View File
@@ -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>