Fix control bar on small screens

3 files changed, 12 insertions, 3 deletions

diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 7dcb21dfe..34ea9e139 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -12,4 +12,6 @@ $progress-margin: 10px;
 
 $dock-padding: 20px;
 
+$first-control-bar-element-margin-left: 1em;
+
 $assets-path: '../../assets/' !default;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 6e1d81673..1b7275529 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -21,6 +21,7 @@ body {
 
   .vjs-dock-text {
     padding: $dock-padding;
+    padding-right: 60px;
     background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
   }
 
@@ -148,7 +149,7 @@ body {
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 
     > button:first-child {
-      margin-left: 1em;
+      margin-left: $first-control-bar-element-margin-left;
     }
 
     .vjs-progress-control,
@@ -583,7 +584,9 @@ body {
       }
     }
 
-    .vjs-volume-control {
+    .vjs-volume-control,
+    .vjs-next-video,
+    .vjs-previous-video {
       display: none !important;
     }
 
@@ -594,6 +597,10 @@ body {
     .vjs-settings {
       width: 33px;
     }
+
+    .vjs-play-control {
+      margin-left: $first-control-bar-element-margin-left;
+    }
   }
 
   // Theater mode is enabled
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 15c007295..cf125a562 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -8,7 +8,7 @@ $playlist-menu-width: 350px;
   background: rgba(0, 0, 0, 0.8);
   z-index: 101;
   transition: right 0.2s;
-  overflow-y: auto;
+  overflow-y: scroll;
 
   // Hidden
   right: -$playlist-menu-width;