From 84d62f4eee33e3bb172d9e13a4a145f96d389c1d Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 31 Jan 2021 18:24:23 +0100
Subject: [PATCH] fix overflow after adding volume control

---
 src/player/Player.vue | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/player/Player.vue b/src/player/Player.vue
index 570281e..1610f9a 100644
--- a/src/player/Player.vue
+++ b/src/player/Player.vue
@@ -47,32 +47,31 @@
         <!-- Controls right --->
         <div class="col-auto col-sm p-0">
           <div class="d-flex flex-nowrap justify-content-end pr-3">
-            <div class="m-0 d-none d-sm-inline-flex align-items-center pr-3">
+            <div class="m-0 d-none d-md-inline-flex align-items-center">
               <b-button variant="link" @click="toggleMute">
                 <Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" />
               </b-button>
-              <b-form-input type="range" min="0" max="1" step="0.05" style="width: 130px"
+              <b-form-input type="range" min="0" max="1" step="0.05"
+                            style="width: 120px; min-width: 0; padding-right: 0.75rem"
                             :title="`Volume: ${Math.round(volume * 100)}%`"
                             :value="muteActive ? 0.0 : volume" @input="setVolume" />
+              <b-button variant="link"
+                        class="m-0" :class="{ 'text-primary': shuffleActive }"
+                        @click="toggleShuffle">
+                <Icon icon="shuffle" />
+              </b-button>
+              <b-button variant="link"
+                        class="m-0" :class="{ 'text-primary': repeatActive }"
+                        @click="toggleRepeat">
+                <Icon icon="arrow-repeat" />
+              </b-button>
             </div>
-            <b-button variant="link"
-                      class="m-0 d-none d-sm-inline-block "
-                      :class="{ 'text-primary': shuffleActive }"
-                      @click="toggleShuffle">
-              <Icon icon="shuffle" />
-            </b-button>
-            <b-button variant="link"
-                      class="m-0 d-none d-sm-inline-block "
-                      :class="{ 'text-primary': repeatActive }"
-                      @click="toggleRepeat">
-              <Icon icon="arrow-repeat" />
-            </b-button>
-            <OverflowMenu class="d-sm-none">
+            <OverflowMenu class="d-md-none">
               <b-dropdown-text>
                 <div class="d-flex justify-content-between">
                   <strong>Volume</strong>
                   <b-form-input
-                    class="px-2" style="width: 175px"
+                    class="px-2" style="width: 120px"
                     type="range" min="0" max="1" step="0.05"
                     :value="volume" @input="setVolume"
                   />