From 44980454bb38bd3eeb8fa37d3fab8c8dcfefe990 Mon Sep 17 00:00:00 2001
From: "mamonov.ep" <nandi.job.off@gmail.com>
Date: Fri, 12 Dec 2025 17:02:36 +0300
Subject: [PATCH] Fix volume slider for Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/player/MiniPlayer.vue b/frontend/src/components/player/MiniPlayer.vue
index 72215d8..aca00cb 100644
--- a/frontend/src/components/player/MiniPlayer.vue
+++ b/frontend/src/components/player/MiniPlayer.vue
@@ -52,15 +52,16 @@
           />
           <div class="volume-popup">
             <span class="volume-value">{{ playerStore.volume }}%</span>
-            <input
-              type="range"
-              min="0"
-              max="100"
-              :value="playerStore.volume"
-              @input="handleVolume"
-              class="volume-slider"
-              orient="vertical"
-            />
+            <div class="volume-slider-wrapper">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                :value="playerStore.volume"
+                @input="handleVolume"
+                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;
-  padding: 0;
+  transform-origin: center center;
 }
 
 .volume-slider::-webkit-slider-runnable-track {