fix volume icon size

src/player/Player.vue

@@ -48,17 +48,14 @@
         <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">
+              <b-button variant="link">
                 <Icon class="volume-icon" icon="volume-up-fill" />
-              <b-form-input
-                :value="volume"
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                @input="setVolume" />
+              </b-button>
+              <b-form-input type="range" min="0" max="1" step="0.05"
+                            :value="volume" @input="setVolume" />
             </div>
             <b-button variant="link"
-                      class="m-0 d-none d-sm-inline-block"
+                      class="m-0 d-none d-sm-inline-block "
                       :class="{ 'text-primary': shuffleActive }"
                       @click="toggleShuffle">
               <Icon icon="shuffle" />
@@ -116,6 +113,10 @@
     height: auto;
     max-height: 100px;
   }
+  .b-icon {
+    display: flex;
+    align-items: center;
+  }
 </style>
 <script lang="ts">
   import Vue from 'vue'

src/style/main.scss

@@ -66,11 +66,6 @@ h1, h2, h3, h4, h5 {
   box-shadow: none !important;
 }
 
-.volume-icon {
-  font-size: 2.25rem;
-  padding: 0.375rem;
-}
-
 @import './nav';
 @import './table';