Player Layout

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -71,29 +71,53 @@
     }
 }
 
-/* Unified responsive player layout.
-   Wide and narrow shapes are pure CSS — no runtime breakpoint subscription.
-   Children are targeted by their stable classes (transport-zone, volume-zone,
-   seek-zone) rather than positional nth-child, since all three render a .mud-stack
-   root and positional selectors would be fragile. */
+/* Unified responsive player layout — CSS Grid with named areas redefined per breakpoint.
+   The metadata (meta-zone) detaches from the waveform (seek-zone) in the mid band, which a
+   flex order-swap can't express, so each of the four zones is placed by grid-area and the three
+   shapes are pure template-area swaps — no runtime breakpoint subscription. min-width:0 on the
+   shrinkable centre zones lets the title truncate and the waveform shrink instead of overflowing. */
 .player-layout {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
     align-items: center;
     gap: 8px;
     padding-right: 2.5rem; /* clear the abs-positioned PlayerWindowControls */
 }
 
-/* Wide (>= 600px): single row, seek zone grows and sits between transport and volume */
-@media (min-width: 600px) {
-    ::deep .transport-zone { order: 1; }
-    ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
-    ::deep .volume-zone { order: 3; flex-shrink: 0; }
+::deep .transport-zone { grid-area: transport; }
+::deep .meta-zone      { grid-area: meta; min-width: 0; }
+::deep .seek-zone      { grid-area: waveform; min-width: 0; }
+::deep .volume-zone    { grid-area: volume; }
+
+/* Wide (>= 900px): single row — transport and volume flank the centre column; the metadata
+   sits directly under the waveform (transport/volume span both rows, centred). */
+@media (min-width: 900px) {
+    .player-layout {
+        grid-template-columns: auto minmax(360px, 1fr) auto;
+        grid-template-areas:
+            "transport waveform volume"
+            "transport meta     volume";
+    }
 }
 
-/* Narrow (< 600px): transport + volume on top row, seek full-width below */
-@media (max-width: 599.98px) {
-    ::deep .transport-zone { order: 1; }
-    ::deep .volume-zone { order: 2; }
-    ::deep .seek-zone { flex-basis: 100%; order: 3; }
+/* Mid (600–900px): metadata rides the top row between transport and volume; the waveform gets
+   the whole bottom row to itself rather than being squeezed beside the metadata. */
+@media (min-width: 600px) and (max-width: 899.98px) {
+    .player-layout {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-areas:
+            "transport meta     volume"
+            "waveform  waveform waveform";
+    }
+}
+
+/* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
+   below — the most compressed shape. */
+@media (max-width: 599.98px) {
+    .player-layout {
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas:
+            "transport .        volume"
+            "waveform  waveform waveform"
+            "meta      meta     meta";
+    }
 }