fix(playlists): hide '#' and Channel by the table's width, not the window's (E28)

Beside the playlist rail an 800 px window left the table 432 px: the fixed
columns took all of it and the title column was 0 px wide, its thumbnail
drawn over the channel. The table is an @container now and the columns hide
under 42rem of its own width (narrowHidden, was phoneHidden).

frontend/src/components/Playlists.tsx

@@ -125,7 +125,7 @@ function Row({
         <td
           key={col.key}
           style={col.width ? { width: col.width } : undefined}
-          className={`px-2 py-1.5 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}${col.phoneHidden ? " hidden sm:table-cell" : ""}`}
+          className={`px-2 py-1.5 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}${col.narrowHidden ? " hidden @2xl:table-cell" : ""}`}
         >
           {col.key === GRIP_KEY ? (
             // The one cell the column defs can't render: the handle needs this row's sortable
@@ -907,8 +907,9 @@ export default function Playlists() {
             // drag; now that the keyboard can, they ARE the instructions for the feature.
             accessibility={dndA11y}
           >
-            {/* Not clipped, so the header's filter popovers can overflow the table box. */}
-            <div className="max-w-5xl mx-auto">
+            {/* Not clipped, so the header's filter popovers can overflow the table box. A container,
+              so a narrow column hides by the table's width, not the window's (`narrowHidden`). */}
+            <div className="@container max-w-5xl mx-auto">
               {/* table-fixed, not auto: every column but the title has a declared width, so the
                 title absorbs the rest and its `truncate` works. Auto layout sizes columns from
                 min-content, and a nowrap title cell's min-content is the entire title. */}