feat: Player & Menu Styles

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor

@@ -14,14 +14,6 @@
                    Color="Color.Primary"
                    Disabled="!CanPlay"
                    OnToggle="@TogglePlayPause"/>
-    @if (!Fixed || HasPrevious || HasNext)
-    {
-        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
-                       Color="Color.Primary"
-                       Size="Size.Large"
-                       OnClick="@SkipNext"
-                       Disabled="!HasNext"/>
-    }
     @if (!Fixed)
     {
         <MudIconButton Icon="@Icons.Material.Filled.Stop"
@@ -30,4 +22,12 @@
                        OnClick="@Stop"
                        Disabled="!IsLoaded"/>
     }
+    @if (!Fixed || HasPrevious || HasNext)
+    {
+        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
+                       Color="Color.Primary"
+                       Size="Size.Large"
+                       OnClick="@SkipNext"
+                       Disabled="!HasNext"/>
+    }
 </MudStack>

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor

@@ -23,17 +23,19 @@
     @* Queue toggle: a second row between the transport controls and the timestamp (§3.1 placement —
        "below the control buttons, to the left of the timestamps"). Shown only when a queue is loaded,
        mirroring the skip-affordance gating, so an empty/single-track player is byte-for-byte unchanged. *@
-    @if (ShowQueueButton)
+    <MudStack Row AlignItems="AlignItems.Center">
-    {
+        <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
-        <MudTooltip Text="Queue">
+        @if (ShowQueueButton)
-            <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
+        {
-                           Color="Color.Primary"
+            <MudTooltip Text="Queue">
-                           Size="Size.Medium"
+                <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
-                           OnClick="QueueToggle"
+                               Color="Color.Primary"
-                           aria-label="Queue"
+                               Size="Size.Medium"
-                           aria-expanded="@QueueOpen"
+                               OnClick="QueueToggle"
-                           Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
+                               aria-label="Queue"
-        </MudTooltip>
+                               aria-expanded="@QueueOpen"
-    }
+                               Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
-    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+            </MudTooltip>
+        }
+    </MudStack>
 </MudStack>

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -3,7 +3,7 @@
 @using DeepDrftPublic.Client.Services
 
 @* Desktop Menu *@
-<div class="d-none d-sm-flex">
+<div class="d-none d-md-flex">
     <nav class="@NavClass">
         <MudStack Row AlignItems="AlignItems.Center">
             <a class="dd-nav-brand" href="/">
@@ -48,7 +48,7 @@
 </div>
 
 @* Mobile Menu *@
-<div class="d-flex d-sm-none">
+<div class="d-flex d-md-none">
     <nav class="@NavClass">
         <MudStack Row AlignItems="AlignItems.Center">
             <a class="dd-nav-brand" href="/">