From 40e67070c2c8026980cdf2377dd142953b17232d Mon Sep 17 00:00:00 2001
From: Dazly Gonsalves <dazlygonsalves@gmail.com>
Date: Sun, 19 Oct 2025 22:23:19 +0530
Subject: [PATCH] style(volume-ui): adjust volume thumb position to align with
 volume fill using CSS var

---
 js/app.js  | 7 +++++--
 styles.css | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/app.js b/js/app.js
index 11f4acf..0165a7f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -890,7 +890,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     const updateVolumeUI = () => {
         const { volume, muted } = audioPlayer;
         volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;
-        volumeFill.style.width = `${muted ? 0 : volume * 100}%`;
+
+        const effectiveVolume = muted ? 0 : volume * 100;
+
+        volumeFill.style.setProperty('--volume-level', `${effectiveVolume}%`);
     };
 
     volumeBtn.addEventListener('click', () => {
@@ -1013,4 +1016,4 @@ document.addEventListener('DOMContentLoaded', async () => {
         e.preventDefault();
         deferredPrompt = e;
     });
-});
\ No newline at end of file
+});
diff --git a/styles.css b/styles.css
index f19e7ef..4c9fc13 100644
--- a/styles.css
+++ b/styles.css
@@ -920,7 +920,7 @@ input:checked + .slider:before {
 }
 
 .volume-controls .volume-bar .volume-fill {
-    width: 70%;
+    width: var(--volume-level, 70%);
     height: 100%;
     background-color: var(--foreground);
     border-radius: 2px;
@@ -933,7 +933,7 @@ input:checked + .slider:before {
 .volume-controls .volume-bar:hover .volume-fill::after {
     content: '';
     position: absolute;
-    right: 0;
+    left: calc(var(--volume-level, 70%) - 6px);
     top: 50%;
     transform: translateY(-50%);
     width: 12px;
@@ -1748,4 +1748,4 @@ input:checked + .slider:before {
         padding: var(--spacing-sm) var(--spacing-md);
         font-size: 0.9rem;
     }
-}
\ No newline at end of file
+}