From 0358df82ac05dd0e08f626cd11cba84e30f4dc45 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 19 Jun 2026 19:18:40 -0400
Subject: [PATCH] feat: Player & Menu Styles

---
 .../AudioPlayerBar/PlayerControls.razor       | 16 +++++------
 .../AudioPlayerBar/PlayerTransportZone.razor  | 28 ++++++++++---------
 .../Layout/DeepDrftMenu.razor                 |  4 +--
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor
index 0d3f920..c0ef965 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor
+++ b/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>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
index 9e585cf..b2095be 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor
+++ b/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)
-    {
-        <MudTooltip Text="Queue">
-            <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
-                           Color="Color.Primary"
-                           Size="Size.Medium"
-                           OnClick="QueueToggle"
-                           aria-label="Queue"
-                           aria-expanded="@QueueOpen"
-                           Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
-        </MudTooltip>
-    }
-    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+    <MudStack Row AlignItems="AlignItems.Center">
+        <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+        @if (ShowQueueButton)
+        {
+            <MudTooltip Text="Queue">
+                <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
+                               Color="Color.Primary"
+                               Size="Size.Medium"
+                               OnClick="QueueToggle"
+                               aria-label="Queue"
+                               aria-expanded="@QueueOpen"
+                               Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
+            </MudTooltip>
+        }
+    </MudStack>
 </MudStack>
diff --git a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
index 2f792b1..f8808bf 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+++ b/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="/">