From 14a7250eef04c3cd824cfc47f6e17492a00aa532 Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Mon, 23 Feb 2026 12:09:37 +0200
Subject: [PATCH] Codex - Second Try for the Fix

---
 frontend/src/melodies/MelodyList.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/melodies/MelodyList.jsx b/frontend/src/melodies/MelodyList.jsx
index 9c0c0f4..8e75104 100644
--- a/frontend/src/melodies/MelodyList.jsx
+++ b/frontend/src/melodies/MelodyList.jsx
@@ -959,7 +959,7 @@ export default function MelodyList() {
 
   return (
     <div className="w-full min-w-0 max-w-full" style={{ overflowX: "clip" }}>
-      <div className="w-full max-w-full overflow-x-hidden">
+      <div className="w-full max-w-full overflow-x-hidden relative z-40">
       <div className="flex items-center justify-between mb-6 w-full min-w-0">
         <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
         {canEdit && (
@@ -1015,7 +1015,7 @@ export default function MelodyList() {
             <option value="draft">Drafts</option>
           </select>
 
-          <div className="relative" ref={creatorPickerRef}>
+          <div className="relative z-50" ref={creatorPickerRef}>
             <button
               type="button"
               onClick={() => setShowCreatorPicker((prev) => !prev)}
@@ -1027,7 +1027,7 @@ export default function MelodyList() {
             </button>
             {showCreatorPicker && (
               <div
-                className="absolute left-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-64 border max-h-64 overflow-auto"
+                className="absolute left-0 top-full mt-1 z-[80] rounded-lg shadow-lg py-2 w-64 border max-h-64 overflow-auto"
                 style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
               >
                 {allCreators.length === 0 ? (
@@ -1078,7 +1078,7 @@ export default function MelodyList() {
           )}
 
           {/* Column visibility dropdown */}
-          <div className="relative" ref={columnPickerRef}>
+          <div className="relative z-50" ref={columnPickerRef}>
             <button
               type="button"
               onClick={() => setShowColumnPicker((prev) => !prev)}
@@ -1095,7 +1095,7 @@ export default function MelodyList() {
             </button>
             {showColumnPicker && (
               <div
-                className="absolute right-0 top-full mt-1 z-20 rounded-lg shadow-lg py-2 w-56 border"
+                className="absolute right-0 top-full mt-1 z-[80] rounded-lg shadow-lg py-2 w-56 border"
                 style={{
                   backgroundColor: "var(--bg-card)",
                   borderColor: "var(--border-primary)",
@@ -1208,8 +1208,8 @@ export default function MelodyList() {
             borderColor: "var(--border-primary)",
           }}
         >
-          <div className="w-full max-w-full overflow-x-auto">
-            <table className="text-sm min-w-max">
+          <div className="w-full max-w-full overflow-x-auto relative z-0">
+            <table className="w-full text-sm min-w-max">
               <thead>
                 <tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
                   {activeColumns.map((col) => (