fix slider

static/styles.css

@@ -584,11 +584,42 @@ select {
   vertical-align: text-bottom;
 }
 
+.user-volume-control {
+  width: 100%;
+  display: none;
+  /* Hidden by default */
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 4px 28px;
+  margin-top: 2px;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.user-volume-control.show-volume {
+  display: flex;
+  /* Show when active */
+}
+
 .volume-slider {
   -webkit-appearance: none;
+  appearance: none;
   background: var(--bg-darker);
   border-radius: 2px;
   outline: none;
+  flex: 1;
+  height: 4px;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.vol-pct {
+  font-size: 10px;
+  opacity: 0.6;
+  min-width: 30px;
+  text-align: right;
 }
 
 .volume-slider::-webkit-slider-thumb {