Fix rounded corners in progress bars

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>

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">

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;

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;