From 2539f82868ed54722d7b0af6eab1b28c8bb890b2 Mon Sep 17 00:00:00 2001
From: scheianu <scheianuionut@gmail.com>
Date: Sun, 13 Sep 2026 00:08:34 +0300
Subject: [PATCH] Fix Add Content card overlapping the playlist table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two cards on the playlist manage page overlapped: the Add Content card
was painted on top of the playlist content card.

Cause: the 9-column playlist table needs ~830px, but its grid column was
only ~683px, so the table overflowed its card by ~150px. The Add Content
card comes later in the DOM, so it painted over the overflowing table.

This was introduced by the minmax(0, ...) I added in the previous commit
to stop a long filename widening the track. That fixed a page-wide
horizontal scrollbar but capped the track, which is what made the table
spill. Reverting alone would not have been correct either — it swaps the
overlap for the scrollbar — so this fixes the underlying width problem:

- Widen the page container. The template already declared max-width:1400px,
  but on its own wrapper — a child cannot widen its parent, so it did
  nothing and the layout was stuck at base.html's 1200px.
- Use 3fr/1fr instead of 2fr/1fr. At 2fr/1fr the table column came out
  ~50px too narrow and sat in a permanent horizontal scrollbar.
- Stack the cards below 1440px, where side-by-side cannot give the table
  the width it needs. Stacked, it fits outright.
- The stacked rule uses minmax(0, 1fr): a bare 1fr keeps the min-content
  floor, which let the table widen the track and push the whole page into
  horizontal overflow at <=900px.
- Trim cell padding 12px -> 8px to reclaim ~72px for the table.
- Keep .playlist-table-scroll (overflow-x:auto) as a last-resort clip for
  genuinely narrow screens, so the table can never paint over its
  neighbour again.

Verified by hit-testing the Add Content card at 500-1920px: zero elements
from the table are painted over it at any width. No page-wide horizontal
overflow at any width; the table fits without scrolling at >=1024px.
---
 .../content/manage_playlist_content.html      | 47 +++++++++++++++----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/app/templates/content/manage_playlist_content.html b/app/templates/content/manage_playlist_content.html
index 0e9695e..d12141d 100644
--- a/app/templates/content/manage_playlist_content.html
+++ b/app/templates/content/manage_playlist_content.html
@@ -39,13 +39,33 @@
     
     .content-grid {
         display: grid;
-        /* minmax(0, …) is required: a bare `2fr 1fr` track has an automatic
-           min-content floor, so the long, unbreakable media filenames in the
-           Add Content card forced the track wider than the viewport and gave
-           the whole page a horizontal scrollbar. */
-        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+        /* 3fr/1fr (not 2fr/1fr) so the 9-column playlist table gets enough room;
+           at 2fr/1fr it was ~50px too narrow and looped with a scrollbar.
+           minmax(0, …) removes the track's automatic min-content floor, without
+           which the table's intrinsic width would widen the track itself. */
+        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
         gap: 20px;
     }
+
+    /* The table needs ~830px and side by side it cannot get that below ~1440px.
+       Stack the cards instead of forcing a horizontal scrollbar on the table. */
+    @media (max-width: 1439px) {
+        .content-grid {
+            /* minmax(0, 1fr) matters here too: a bare 1fr keeps the min-content
+               floor, which let the 830px table widen the track and push the
+               page into horizontal overflow. */
+            grid-template-columns: minmax(0, 1fr);
+        }
+    }
+
+    /* Last-resort containment: on a genuinely narrow screen the table cannot
+       fit, and an unclipped table is painted straight over the Add Content
+       card, because that card is later in the DOM and therefore paints on top.
+       Clip here so the table scrolls inside its own card instead. */
+    .playlist-table-scroll {
+        overflow-x: auto;
+        max-width: 100%;
+    }
     
     .playlist-table {
         width: 100%;
@@ -54,13 +74,13 @@
     
     .playlist-table th {
         background: #f8f9fa;
-        padding: 12px;
+        padding: 8px;
         text-align: left;
         border-bottom: 2px solid #dee2e6;
     }
     
     .playlist-table td {
-        padding: 12px;
+        padding: 8px;
         border-bottom: 1px solid #dee2e6;
     }
     
@@ -308,11 +328,18 @@
     body.dark-mode .duration-spinner button.btn-decrease {
         color: #f56565;
     }
+    
+    /* The page needs more than base.html's 1200px container to show the
+       playlist table and the Add Content card side by side. This template
+       already declared max-width:1400px on its own wrapper, but a child cannot
+       widen its parent, so it had no effect. Widen the base container instead. */
+    body > .container {
+        max-width: 1400px;
+    }
 </style>
 
 <div class="container" style="max-width: 1400px;">
-    <div class="playlist-header">
-        <h1>🎬 {{ playlist.name }}</h1>
+    <div class="playlist-header">        <h1>🎬 {{ playlist.name }}</h1>
         {% if playlist.description %}
         <p style="margin: 5px 0; opacity: 0.9;">{{ playlist.description }}</p>
         {% endif %}
@@ -353,6 +380,7 @@
             </div>
             
             {% if playlist_content %}
+            <div class="playlist-table-scroll">
             <table class="playlist-table" id="playlist-table">
                 <thead>
                     <tr>
@@ -460,6 +488,7 @@
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
             {% else %}
             <div style="text-align: center; padding: 40px; color: #999;">
                 <div style="font-size: 48px;">📭</div>