feature: AudioPlayerBar Layout Enhancements

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

@@ -80,7 +80,7 @@
     display: grid;
     align-items: center;
     gap: 8px;
-    padding-right: 2.5rem; /* clear the abs-positioned PlayerWindowControls */
+    /*padding-right: 2.5rem; !* clear the abs-positioned PlayerWindowControls *!*/
 }
 
 ::deep .transport-zone { grid-area: transport; }
@@ -112,7 +112,19 @@
 
 /* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
    below — the most compressed shape. */
-@media (max-width: 599.98px) {
+@media (min-width: 420px) and (max-width: 599.98px) {
+    .player-layout {
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas:
+            "transport .        volume"
+            "waveform  waveform waveform"
+            "meta      meta     meta";
+    }
+}
+
+/* Very Narrow (< 400px): transport + volume share the top row; waveform then metadata stack full-width
+   below — the most compressed shape. */
+@media (max-width: 419.98px) {
     .player-layout {
         grid-template-columns: auto 1fr auto;
         grid-template-areas:

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

@@ -67,22 +67,14 @@
     ::deep .track-meta-sep {
         display: none;
     }
-}
 
-@media (max-width: 899.98px) {
     ::deep .track-meta-year {
         padding-left: 8px;
-        padding-right: 8px;
     }
 }
-/* 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;
-    }
 
+/* Narrow band (<600): fully vertical — title / artist / genre / year all stacked, left-aligned. */
+@media (min-width: 420px) and (max-width: 599.98px) {
     .track-meta-identity {
         flex-direction: column;
         align-items: flex-start;
@@ -98,4 +90,16 @@
     ::deep .track-meta-sep {
         display: none;
     }
+
+    ::deep .track-meta-year {
+        padding-left: 8px;
+    }
+}
+
+@media (max-width: 419.98px) {
+    .track-meta-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
 }