Fix volume slider for Firefox

- Add wrapper for volume slider
- Use CSS transform instead of orient attribute
- Set transform-origin to center

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/player/MiniPlayer.vue

@@ -52,15 +52,16 @@
           />
           <div class="volume-popup">
             <span class="volume-value">{{ playerStore.volume }}%</span>
-            <input
+            <div class="volume-slider-wrapper">
-              type="range"
+              <input
-              min="0"
+                type="range"
-              max="100"
+                min="0"
-              :value="playerStore.volume"
+                max="100"
-              @input="handleVolume"
+                :value="playerStore.volume"
-              class="volume-slider"
+                @input="handleVolume"
-              orient="vertical"
+                class="volume-slider"
-            />
+              />
+            </div>
           </div>
         </div>
 
@@ -310,6 +311,14 @@ async function handleLeave() {
   visibility: visible;
 }
 
+.volume-slider-wrapper {
+  width: 8px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
@@ -319,8 +328,7 @@ async function handleLeave() {
   border-radius: 4px;
   cursor: pointer;
   transform: rotate(-90deg);
-  margin: 0;
+  transform-origin: center center;
-  padding: 0;
 }
 
 .volume-slider::-webkit-slider-runnable-track {