From 9650b6b1b0c53443db9e7d06af27d183b8be31ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <cda@rootkey.co.uk>
Date: Sat, 21 Nov 2020 20:07:54 +0000
Subject: [PATCH] Added padding to volume slider

---
 changes/changelog.d/1241.enhancement            | 1 +
 front/src/components/audio/VolumeControl.vue    | 2 +-
 front/src/style/components/_volume_control.scss | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 changes/changelog.d/1241.enhancement

diff --git a/changes/changelog.d/1241.enhancement b/changes/changelog.d/1241.enhancement
new file mode 100644
index 000000000..776a3a3ae
--- /dev/null
+++ b/changes/changelog.d/1241.enhancement
@@ -0,0 +1 @@
+Added padding to volume slider to ease mouse control (#1241)
\ No newline at end of file
diff --git a/front/src/components/audio/VolumeControl.vue b/front/src/components/audio/VolumeControl.vue
index 47a2a9594..6d765a25f 100644
--- a/front/src/components/audio/VolumeControl.vue
+++ b/front/src/components/audio/VolumeControl.vue
@@ -34,7 +34,7 @@
         max="1"
         v-model="sliderVolume" />
     </div>
-  </button class="circular control">
+  </button>
 </template>
 <script>
 import { mapState, mapGetters, mapActions } from "vuex"
diff --git a/front/src/style/components/_volume_control.scss b/front/src/style/components/_volume_control.scss
index c08b1a00f..c070abc46 100644
--- a/front/src/style/components/_volume_control.scss
+++ b/front/src/style/components/_volume_control.scss
@@ -24,6 +24,7 @@
     }
     input {
       max-width: 8.5em;
+      padding: 1em;
     }
     &:not(:hover):not(.expanded) .popup {
       display: none;