From 78c6803e6b013513ddc846372d1350bb5c3992a3 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 14:28:50 -0400
Subject: [PATCH] fix(css): halve volume control width and pin it to flex-start
 at wide breakpoints

---
 .../Controls/AudioPlayerBar/AudioPlayerBar.razor.css          | 2 +-
 .../Controls/AudioPlayerBar/VolumeControls.razor.css          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index 38848b5..ce23ac6 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -89,7 +89,7 @@
 @media (min-width: 600px) {
     ::deep .transport-zone { order: 1; }
     ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
-    ::deep .volume-controls { order: 3; }
+    ::deep .volume-controls { order: 3; align-self: flex-start; }
 }
 
 /* Narrow (< 600px): transport + volume on top row, seek full-width below */
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
index c31db9b..89f4198 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/VolumeControls.razor.css
@@ -1,8 +1,8 @@
 /* Width caps only — layout/colour come from MudStack + theme */
 .volume-controls {
-    width: 140px;
+    width: 70px;
 }
 
 .volume-slider {
-    width: 100px;
+    width: 50px;
 }