From d8388a428064c0d975be885b05ec8d8a960e5ca5 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sat, 26 Sep 2020 11:15:07 +0200
Subject: [PATCH] player: fix overflow

---
 src/player/Player.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/player/Player.vue b/src/player/Player.vue
index 9c98365..e2f41da 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -11,17 +11,17 @@
       <div class="progress2" @click="seek">
         <b-progress :value="progress" :max="100" height="4px" />
       </div>
-      <div class="row d-flex align-items-center py-2 m-0">
+      <div class="row align-items-center m-0" style="height: 100%">
         <!-- Track info --->
-        <div class="col d-flex p-0 text-truncate">
-          <div class="d-flex align-items-center">
-            <template v-if="track">
-              <div class="pl-3 align-middle">
-                <div>{{ track.title }}</div>
-                <div>{{ track.artist }}</div>
-              </div>
-            </template>
-          </div>
+        <div class="col p-0 pl-3" style="min-width: 0; width: 0;">
+          <template v-if="track">
+            <div class="text-truncate">
+              {{ track.title }}
+            </div>
+            <div class="text-truncate">
+              {{ track.artist }}
+            </div>
+          </template>
         </div>
 
         <!-- Controls--->
@@ -36,8 +36,10 @@
             <Icon icon="skip-end-fill" />
           </b-button>
         </div>
-        <div class="col p-0 text-truncate">
-          <div v-if="track" class="pr-3 text-right">
+
+        <!-- Time --->
+        <div class="col p-0" style="min-width: 0; width: 0;">
+          <div v-if="track" class="pr-3 text-right text-truncate">
             {{ $formatDuration(currentTime) }} / {{ $formatDuration(duration) }}
           </div>
         </div>