Player Layout

2026-06-06 17:28:39 -04:00
parent 3e4ddbb2a6
commit 6b18d7cc1e
9 changed files with 111 additions and 33 deletions
@@ -40,3 +40,56 @@
 ::deep .track-meta-year {
    opacity: 0.75;
 }
+
+/* The metadata's three shapes track the dock's layout bands (same breakpoints as the grid in
+   AudioPlayerBar.razor.css), not the label's own slot width — in the <600 band the slot is actually
+   full-width yet we still want it fully vertical, which a container query can't express.
+
+   Mid band (600–900): 2×2 — title over artist on the left (start-justified), genre over year on the
+   right (end-justified). The row stays a row; only the two inner groups go vertical. */
+@media (min-width: 600px) and (max-width: 899.98px) {
+    .track-meta-row {
+        align-items: flex-start;
+    }
+
+    .track-meta-identity {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+    }
+
+    .track-meta-accents {
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 2px;
+    }
+
+    ::deep .track-meta-sep {
+        display: none;
+    }
+}
+
+/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
+@media (max-width: 599.98px) {
+    .track-meta-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    .track-meta-identity {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+    }
+
+    .track-meta-accents {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+    }
+
+    ::deep .track-meta-sep {
+        display: none;
+    }
+}