Improve playlist element style

1 files changed, 20 insertions, 17 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index c1eaf9b2b..d61a0bc3e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -16,6 +16,8 @@ $player-factor: 1.7; // 16/9
 
 @mixin playlist-below-player {
   width: 100%;
+  height: auto;
+  max-height: 300px;
   border-bottom: 1px solid $separator-border-color;
 }
 
@@ -51,6 +53,12 @@ $player-factor: 1.7; // 16/9
   justify-content: center;
   margin: 0 -15px;
 
+  #videojs-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+  }
+
   .remote-server-down {
     color: #fff;
     display: flex;
@@ -73,10 +81,12 @@ $player-factor: 1.7; // 16/9
   }
 
   .playlist {
-    width: 400px;
+    min-width: 200px;
+    max-width: 470px;
     height: 66vh;
     background-color: var(--mainBackgroundColor);
     overflow-y: auto;
+    border-bottom: 1px solid $separator-border-color;
 
     .playlist-info {
       padding: 5px 30px;
@@ -492,6 +502,15 @@ my-video-comments {
 }
 
 @media screen and (max-width: 1100px) {
+  #video-wrapper {
+    flex-direction: column;
+    justify-content: center;
+
+    .playlist {
+      @include playlist-below-player;
+    }
+  }
+
   .video-bottom {
     flex-direction: column;
 
@@ -506,22 +525,6 @@ my-video-comments {
   }
 }
 
-@media screen and (max-width: 900px) {
-  #video-wrapper {
-    flex-direction: column;
-    justify-content: center;
-
-    #videojs-wrapper {
-      display: flex;
-      justify-content: center;
-    }
-
-    .playlist {
-      @include playlist-below-player;
-    }
-  }
-}
-
 @media screen and (max-width: 600px) {
   .video-bottom {
     margin: 20px 0 0 0 !important;