make playlist body scrollable

src/data/songs.js

@@ -1,4 +1,5 @@
-const songs = [{
+const songs = [
+  {
     title: "Because I got high",
     album: "The best of",
     artists: ["Weedman, ", "Bobby Brown"],
@@ -21,9 +22,170 @@ const songs = [{
     album: "Remastered 2011",
     artists: ["Queen"],
     duration: "03:14",
-    }
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },
 ];
 
 export default {
-    songs
+  songs,
-}
+};

src/views/PlaylistView.vue

@@ -1,7 +1,11 @@
 <template>
   <Header />
   <div class="p-bg rounded">
+    <div class="clip">
+      <div class="scrollable">
         <SongList />
+      </div>
+    </div>
     <div class="f-artists-p">
       <FeaturedArtists />
     </div>
@@ -33,6 +37,19 @@ export default {
   padding: $small;
 }
 
+.p-bg .clip {
+  height: calc(100% - 14em);
+  padding-bottom: $small;
+  border-bottom: solid 1px $seperator;
+}
+
+.p-bg .scrollable {
+  height: 100%;
+  border-radius: $small;
+  overflow-y: auto;
+  padding-right: $small;
+}
+
 .p-bg .f-artists {
   position: absolute;
   bottom: 0;