From db167ad80bada4c33b15ccf01a1598a296bfe63c Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Thu, 21 Jul 2022 21:46:23 +0000
Subject: [PATCH] Fix rounded corners in progress bars

---
 front/src/components/Queue.vue          | 4 ++--
 front/src/components/audio/Player.vue   | 4 ++--
 front/src/style/components/_player.scss | 1 +
 front/src/style/components/_queue.scss  | 1 +
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 12850155c..d2c92d163 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -228,11 +228,11 @@ const touchProgress = (event: MouseEvent) => {
                     >
                       <div
                         class="buffer bar"
-                        :style="{ 'transform': `scaleX(${bufferProgress / 100})` }"
+                        :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
                       />
                       <div
                         class="position bar"
-                        :style="{ 'transform': `scaleX(${progress / 100})` }"
+                        :style="{ 'transform': `translateX(${progress - 100}%)` }"
                       />
                     </div>
                   </div>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 14ec3625f..cc3c9eac9 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -126,11 +126,11 @@ const touchProgress = (event: MouseEvent) => {
       >
         <div
           class="buffer bar"
-          :style="{ 'transform': `scaleX(${bufferProgress / 100})` }"
+          :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
         />
         <div
           class="position bar"
-          :style="{ 'transform': `scaleX(${progress / 100})` }"
+          :style="{ 'transform': `translateX(${progress - 100}%)` }"
         />
       </div>
       <div class="controls-row">
diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss
index 5668455f7..721623d48 100644
--- a/front/src/style/components/_player.scss
+++ b/front/src/style/components/_player.scss
@@ -9,6 +9,7 @@
     height: 1rem;
     z-index: 1;
     padding-bottom: 0.8rem;
+    border-radius: 0;
 
     .bar {
       height: 0.2rem;
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index 45f2eb6b7..212266510 100644
--- a/front/src/style/components/_queue.scss
+++ b/front/src/style/components/_queue.scss
@@ -165,6 +165,7 @@
   }
   .progress-area .progress {
     border-radius: 0.28571429rem;
+    overflow: hidden;
   }
   .progress-wrapper, .warning.message {
     max-width: 25em;