diff --git a/public/css/style.css b/public/css/style.css
index 3ba0492..4b09ccf 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -677,11 +677,11 @@ header p {
     flex-wrap: nowrap;
     opacity: 1;
     transition: opacity 0.2s ease, transform 0.2s ease;
-    overflow-x: auto;
+    overflow: visible;
 }
 
 .custom-controls.controls-faded,
-.custom-seek-container.controls-faded {
+.control-seek.controls-faded {
     opacity: 0;
     transform: translateY(12px);
     pointer-events: none;
@@ -702,6 +702,7 @@ header p {
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    min-height: 2rem;
 }
 
 .control-time {
@@ -817,6 +818,11 @@ header p {
     white-space: nowrap;
 }
 
+.volume-popover .popover-panel {
+    left: 0;
+    transform: translateX(0) translateY(6px);
+}
+
 .control-popover:hover .popover-panel,
 .control-popover:focus-within .popover-panel {
     opacity: 1;
@@ -824,6 +830,11 @@ header p {
     transform: translateX(-50%) translateY(0);
 }
 
+.volume-popover:hover .popover-panel,
+.volume-popover:focus-within .popover-panel {
+    transform: translateX(0) translateY(0);
+}
+
 .volume-control {
     display: flex;
     align-items: center;
@@ -1118,11 +1129,14 @@ header p {
         align-items: center;
         margin: -6.25rem 0.75rem 0;
         width: calc(100% - 1.5rem);
+        flex-wrap: wrap;
+        row-gap: 0.75rem;
     }
 
     .controls-left,
     .controls-right {
         width: auto;
+        flex: 1 1 auto;
     }
 
     .controls-right {
@@ -1145,6 +1159,8 @@ header p {
     }
 
     .control-seek {
-        min-width: 220px;
+        order: 3;
+        width: 100%;
+        min-width: 0;
     }
 }