From 605a4488acd6e8e2c8548b2b80f56539e3dc4da2 Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Sun, 4 Jan 2026 10:54:14 -0700
Subject: [PATCH] fix(ui): resolve overlap between media item badges and sticky
 action bar

- Added z-index: 20 to .action-bar to ensure it stays above absolute-positioned badges (z-index: 10).
- Added position: relative to list items in plan and match modals to correctly contain badges.
- Ensured action bar has solid background to cover scrolling content.
---
 src/MediaManager.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index cc056b4..c9062c3 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -300,6 +300,7 @@
       border-bottom-right-radius: 12px;
       display: flex;
       gap: 8px;
+      z-index: 20;
     }
 
     /* Modal */
@@ -574,6 +575,12 @@
     .unlink-btn:hover {
       background: #fee2e2;
     }
+
+    /* Ensure plan list items contain their absolute children */
+    #details-content li,
+    #match-modal-text li {
+      position: relative;
+    }
   </style>
 </head>
 
@@ -735,7 +742,7 @@
     </p>
     <button onclick="controller.generateSku()" class="btn btn-primary" style="width: auto;">Generate SKU</button>
   </div>
-  
+
   <!-- Define Product Prompt -->
   <div id="define-product-ui"
     style="display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top: 80px;">
@@ -744,9 +751,9 @@
     <p style="color: var(--text-secondary); max-width: 300px; margin-bottom: 24px; line-height: 1.5;">
       Please define <strong>Product Type</strong> and <strong>Style</strong> to generate a SKU.
     </p>
-  
+
     <div style="display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 400px; text-align: left;">
-  
+
       <!-- Title -->
       <div>
         <label
@@ -755,7 +762,7 @@
         <input id="input-product-title" type="text" placeholder="e.g. Vintage T-Shirt"
           style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-surface); color: var(--text); font-size: 14px;">
       </div>
-  
+
       <!-- Description -->
       <div>
         <label
@@ -763,7 +770,7 @@
         <textarea id="input-product-desc" rows="3" placeholder="Product details..."
           style="width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-surface); color: var(--text); font-family: inherit; font-size: 14px; resize: vertical;"></textarea>
       </div>
-  
+
       <div style="display: flex; gap: 16px;">
         <!-- Type -->
         <div style="flex: 1;">
@@ -786,7 +793,7 @@
           </select>
         </div>
       </div>
-  
+
       <div style="display: flex; gap: 12px; margin-top: 8px;">
         <button id="btn-save-def" onclick="controller.saveProductDefinition()" class="btn btn-primary"
           style="flex: 1;">Save & Generate SKU</button>