From 874b0c67ae3d661c309183318810163cdd7a71e8 Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com>
Date: Sat, 9 May 2026 18:52:37 +0200
Subject: [PATCH] fix(context-menu): drop inline z-index that hid menus under
 floating player (#522)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(context-menu): drop inline z-index that hid menus under floating player

The main context menu wrapper carried an inline `zIndex: 999` that
overrode the `.context-menu { z-index: 10000 }` stylesheet rule. The
floating player bar sits at z-index 1000, so when a menu opened near
the bottom of the screen — long enough or anchored low — the player
bar covered it.

Removing the inline override lets the stylesheet rule (10000) win, so
the menu always paints on top of the floating bar. Submenus inherit
the same stacking context so they follow the parent menu.

Closes #521.

* docs(changelog): add context-menu floating-player z-index fix entry
---
 CHANGELOG.md                   | 7 +++++++
 src/components/ContextMenu.tsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97dcfcbc..62fd5859 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -211,6 +211,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Fixed
 
+### Context menu — render above the floating player bar
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), reported by Prymz, PR [#522](https://github.com/Psychotoxical/psysonic/pull/522)**
+
+* The main context menu wrapper carried an inline `zIndex: 999` that overrode the stylesheet's `z-index: 10000`, and the floating player bar sits at `z-index: 1000`. Right-clicking a track near the bottom of the screen with the floating bar enabled cut off the bottom of the menu (issue [#521](https://github.com/Psychotoxical/psysonic/issues/521)).
+* Inline override removed; the stylesheet rule wins so the menu always paints above the floating bar. Submenus inherit the parent menu's stacking context and follow.
+
 ### Home — Because-you-listened rail compact in narrow layouts
 
 **By [@Psychotoxical](https://github.com/Psychotoxical), PR [#520](https://github.com/Psychotoxical/psysonic/pull/520)**
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index b2146fea..03ecfcfb 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -1519,7 +1519,7 @@ export default function ContextMenu() {
       <div
         ref={menuRef}
         className="context-menu animate-fade-in"
-        style={{ left: coords.x, top: coords.y, zIndex: 999 }}
+        style={{ left: coords.x, top: coords.y }}
         tabIndex={-1}
         onKeyDown={onMenuKeyDown}
       >