From 56a552f893ec8cf991062f0dd17013155f722f6b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 25 May 2026 12:59:07 -0700
Subject: [PATCH] fix playerbar slider styles

- left / right values should be consistent width
---
 .../components/playerbar-slider.module.css    | 47 +++++++++----------
 .../player/components/playerbar-slider.tsx    |  3 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/renderer/features/player/components/playerbar-slider.module.css b/src/renderer/features/player/components/playerbar-slider.module.css
index b03f4caf4..4cce7acb6 100644
--- a/src/renderer/features/player/components/playerbar-slider.module.css
+++ b/src/renderer/features/player/components/playerbar-slider.module.css
@@ -14,6 +14,8 @@
 }
 
 .root {
+    width: 100%;
+
     &:hover {
         .bar {
             background-color: var(--theme-colors-primary-filled);
@@ -44,48 +46,45 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-.track {
-    &::before {
-        right: calc(0.1rem * -1);
-    }
-}
-
 .slider-container {
-    display: flex;
+    --slider-value-width: 4.75rem;
+    --slider-value-gap: var(--theme-spacing-sm);
+
+    display: grid;
+    grid-template-columns: var(--slider-value-width) minmax(0, 1fr) var(--slider-value-width);
+    gap: var(--slider-value-gap);
+    align-items: center;
     width: 95%;
     height: 20px;
 }
 
 .slider-value-wrapper {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    max-width: 50px;
+    min-width: 0;
     min-height: 0;
 
+    &:first-child {
+        justify-self: end;
+    }
+
+    &:last-child {
+        justify-self: start;
+    }
+
     @media (width < 768px) {
         display: none;
     }
 }
 
-.slider-value-wrapper-elapsed {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-    max-width: 4.75rem;
-    min-height: 0;
-
-    @media (width < 768px) {
-        display: none;
+@media (width < 768px) {
+    .slider-container {
+        grid-template-columns: minmax(0, 1fr);
     }
 }
 
 .slider-wrapper {
     display: flex;
-    flex: 6;
     align-items: center;
+    width: 100%;
+    min-width: 0;
     height: 100%;
 }
diff --git a/src/renderer/features/player/components/playerbar-slider.tsx b/src/renderer/features/player/components/playerbar-slider.tsx
index c1cc18ece..fa5198a50 100644
--- a/src/renderer/features/player/components/playerbar-slider.tsx
+++ b/src/renderer/features/player/components/playerbar-slider.tsx
@@ -42,7 +42,7 @@ export const PlayerbarSlider = () => {
     return (
         <>
             <div className={styles.sliderContainer}>
-                <div className={styles.sliderValueWrapperElapsed}>
+                <div className={styles.sliderValueWrapper}>
                     <ScrobbleStatus formattedTime={formattedTime} />
                 </div>
                 <div className={styles.sliderWrapper}>
@@ -81,7 +81,6 @@ export const CustomPlayerbarSlider = ({ ...props }: SliderProps) => {
                 label: styles.label,
                 root: styles.root,
                 thumb: styles.thumb,
-                track: styles.track,
             }}
             {...props}
             size={6}