Changed MusicBox to circular shape and made the visualizer responsive

src/renderer/components/MusicBox.vue

@@ -26,7 +26,7 @@ export default {
 div.music-box
     width: 140px
     img
-        border-radius: 4px
+        border-radius: 100%
         width: 100%
         height: auto
         box-shadow: 0px 10px 60px -2px rgba(0,0,0,0.60)
@@ -36,6 +36,7 @@ div.music-box
         white-space: nowrap
         overflow: hidden
         margin: 0.5rem 0
+        text-align: center
         &.title
             font-size: .9rem
         &.artist

src/renderer/layouts/PlayerBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section>
+    <section class="player">
         <img class="artwork" src="/static/demo/artwork.jpg" />
         <div>
             <p class="title">Perfidia</p>
@@ -24,7 +24,8 @@ export default {
       barHeight: 1,
       barGap: null,
       autoCenter: true,
-      height: 64
+      height: 64,
+      responsive: true
     })
     wavesurfer.load('/static/demo/music.mp3')
     wavesurfer.on('ready', function () {
@@ -34,8 +35,8 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-section
+<style lang="sass">
+section.player
     display: flex
     align-items: center
     border-top: 1px solid rgba(0,0,0,0.1)
@@ -52,4 +53,6 @@ section
     .visualizer
         flex-grow: 1
         height: 64px
+        wave
+            overflow-x: hidden !important
 </style>