Adjusted the main layout for sidebar, page, player and fixed normalize

src/renderer/App.vue

@@ -2,8 +2,8 @@
   <div id="app" class="root">
     <DockableSidebar />
     <div class="page-wrapper">
-      <router-view></router-view>
-      <PlayerBar />
+      <router-view class="page"></router-view>
+      <PlayerBar class="player-bar" />
     </div>
   </div>
 </template>
@@ -18,10 +18,17 @@ export default {
 </script>
 
 <style lang="sass">
-@import "../../node_modules/normalize-scss/sass/normalize.scss"
+@import 'normalize-scss';
+@include normalize();
 .root,.page-wrapper
   display: flex
 .page-wrapper
   flex-direction: column
   flex-grow: 1
+  height: 100vh
+  box-sizing: border-box
+  max-height: 100vh
+  .page
+    flex-grow: 1
+    overflow: auto
 </style>

src/renderer/layouts/DockableSidebar.vue

@@ -10,6 +10,8 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped lang="sass">
+section
+    width: 100%
+    max-width: 250px
 </style>

src/renderer/layouts/HomePage.vue

@@ -1,7 +1,7 @@
 <template>
     <section>
       <ActionBar />
-      HomePage
+      <p>home</p>
     </section>
 </template>
 

src/renderer/layouts/PlayerBar.vue

@@ -10,6 +10,7 @@ export default {
 }
 </script>
 
-<style>
-
+<style lang="sass" scoped>
+section
+    height: 3rem
 </style>