Improve playlist long description display (#1358)

* $ Add class names to some elements & use in CSS

* * Update playlist page style to ensure description box has max height to enusre visibility of share button

src/renderer/components/playlist-info/playlist-info.css

@@ -1,32 +0,0 @@
-.playListThumbnail {
-  width: 100%;
-}
-
-.playlistThumbnail img {
-  width: 100%;
-
-  cursor: pointer;
-}
-
-.playlistChannel {
-  height: 70px;
-
-  /* Indicates the box can be clicked to navigate */
-  cursor: pointer;
-}
-
-.playlistChannel img {
-  width: 70px;
-  float: left;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.playlistChannel h3 {
-  float: left;
-  position: relative;
-  width: 200px;
-  margin-left: 10px;
-  top: 5px;
-  font-size: 15px;
-}

src/renderer/components/playlist-info/playlist-info.sass

@@ -0,0 +1,34 @@
+.playListThumbnail
+  width: 100%
+
+.playlistThumbnail img
+  width: 100%
+
+  cursor: pointer
+
+.playlistDescription
+  max-height: 20vh
+  overflow-y: auto
+
+  @media only screen and (max-width: 500px)
+    max-height: 10vh
+
+.playlistChannel
+  height: 70px
+
+  /* Indicates the box can be clicked to navigate */
+  cursor: pointer
+
+.channelThumbnail
+  width: 70px
+  float: left
+  border-radius: 200px 200px 200px 200px
+  -webkit-border-radius: 200px 200px 200px 200px
+
+.channelName
+  float: left
+  position: relative
+  width: 200px
+  margin-left: 10px
+  top: 5px
+  font-size: 15px

src/renderer/components/playlist-info/playlist-info.vue

@@ -18,7 +18,9 @@
       </span>
       {{ lastUpdated }}
     </p>
-    <p>
+    <p
+      class="playlistDescription"
+    >
       {{ description }}
     </p>
     <hr>
@@ -26,8 +28,13 @@
       class="playlistChannel"
       @click="goToChannel"
     >
-      <img :src="channelThumbnail">
-      <h3>
+      <img
+        class="channelThumbnail"
+        :src="channelThumbnail"
+      >
+      <h3
+        class="channelName"
+      >
         {{ channelName }}
       </h3>
     </div>
@@ -42,4 +49,4 @@
 </template>
 
 <script src="./playlist-info.js" />
-<style scoped src="./playlist-info.css" />
+<style scoped lang="sass" src="./playlist-info.sass" />