fix(frontend): close the diagonal hover gap in the playlist submenu

The submenu was positioned with a margin gap after the trigger row, so moving the mouse toward it crossed a dead zone with no hovered element and the CSS :hover state dropped, hiding the submenu before the cursor reached it. The gap is now padding on the submenu's own wrapper, which keeps it part of the hoverable box and bridges the trigger to the submenu seamlessly.
This commit is contained in:
2026-07-16 17:38:43 +02:00
parent 90be0c6538
commit 911467f0ef
@@ -380,9 +380,12 @@
<ChevronRight class="h-4 w-4 shrink-0 text-neutral-500" />
</div>
<div
class="invisible absolute top-0 z-50 w-56 rounded-2xl border border-white/10 bg-neutral-900 p-1.5 opacity-0 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.8)] transition group-hover/addmenu:visible group-hover/addmenu:opacity-100 {contextMenu.openLeft
? 'right-full mr-1'
: 'left-full ml-1'}"
class="invisible absolute top-0 z-50 opacity-0 transition group-hover/addmenu:visible group-hover/addmenu:opacity-100 {contextMenu.openLeft
? 'right-full pr-1'
: 'left-full pl-1'}"
>
<div
class="w-56 rounded-2xl border border-white/10 bg-neutral-900 p-1.5 shadow-[0_12px_28px_-10px_rgba(0,0,0,0.8)]"
>
<div class="max-h-72 overflow-y-auto">
{#each data.playlists as playlist (playlist.id)}
@@ -424,4 +427,5 @@
</div>
</div>
</div>
</div>
{/if}