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.
ske087
2539f82868