fix(sidebar): move favorites popover outside aside to fix z-index

The popover appeared behind other elements when the sidebar was
collapsed because it was inside the .content div which has
overflow:hidden. Moving it outside the aside tag resolves this.
This commit is contained in:
vicrodh committed 2026-01-30 08:39:54 -06:00
1 parent 15c9b17222
commit 2e9bbf2558
1 file changed
+29 -29
+29 -29
View File
@@ -1106,35 +1106,6 @@
{/if}
</nav>
<!-- Favorites menu popover (when sidebar collapsed) -->
{#if showFavoritesMenu && !isExpanded}
<div
class="favorites-popover"
style="left: {favoritesMenuPos.x}px; top: {favoritesMenuPos.y}px;"
>
<button class="popover-item" onclick={() => { handleViewChange('favorites'); showFavoritesMenu = false; }}>
<Heart size={14} />
<span>{$t('favorites.title')}</span>
</button>
<div class="popover-divider"></div>
{#each favoritesTabOrder as tab}
<button
class="popover-item"
onclick={() => { handleViewChange(`favorites-${tab}`); showFavoritesMenu = false; }}
>
{#if tab === 'artists'}
<User size={14} />
{:else if tab === 'albums'}
<Disc size={14} />
{:else if tab === 'tracks'}
<Music size={14} />
{/if}
<span>{$t(`favorites.${tab}`)}</span>
</button>
{/each}
</div>
{/if}
<!-- Playlists Section (hidden in offline mode) -->
{#if !isOffline}
<div class="section playlists-section">
@@ -1389,6 +1360,35 @@
</div>
</aside>
<!-- Favorites menu popover (when sidebar collapsed) - outside sidebar to avoid overflow clipping -->
{#if showFavoritesMenu && !isExpanded}
<div
class="favorites-popover"
style="left: {favoritesMenuPos.x}px; top: {favoritesMenuPos.y}px;"
>
<button class="popover-item" onclick={() => { handleViewChange('favorites'); showFavoritesMenu = false; }}>
<Heart size={14} />
<span>{$t('favorites.title')}</span>
</button>
<div class="popover-divider"></div>
{#each favoritesTabOrder as tab}
<button
class="popover-item"
onclick={() => { handleViewChange(`favorites-${tab}`); showFavoritesMenu = false; }}
>
{#if tab === 'artists'}
<User size={14} />
{:else if tab === 'albums'}
<Disc size={14} />
{:else if tab === 'tracks'}
<Music size={14} />
{/if}
<span>{$t(`favorites.${tab}`)}</span>
</button>
{/each}
</div>
{/if}
<!-- Playlist Context Menu -->
{#if contextMenu.visible}
{@const availableFolders = folders.filter(f => f.id !== contextMenu.currentFolderId)}