From 2e9bbf2558f2df0bdf5fece7b39585be5c5ef840 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Fri, 30 Jan 2026 08:39:54 -0600
Subject: [PATCH] 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.
---
 src/lib/components/Sidebar.svelte | 58 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 6c4af9282..28e8b1f15 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -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)}