(css) improve video-watch title display on small screens

1 files changed, 13 insertions, 1 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 86b44d5da..7b134a4dc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -108,6 +108,10 @@ $player-factor: 1.7; // 16/9
   border-radius: 0;
 }
 
+.flex-direction-column {
+  flex-direction: column;
+}
+
 #video-not-found {
   height: 300px;
   line-height: 300px;
@@ -142,6 +146,13 @@ $player-factor: 1.7; // 16/9
         flex-grow: 1;
       }
 
+      .video-info-first-row-bottom {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        width: 100%;
+      }
+
       .video-info-date-views {
         flex-grow: 1;
         margin-bottom: 10px;
@@ -209,8 +220,9 @@ $player-factor: 1.7; // 16/9
       }
 
       .video-actions-rates {
-        margin: 20px 0 10px 0;
+        margin: 0 0 10px 0;
         align-items: start;
+        width: max-content;
 
         .video-actions {
           height: 40px; // Align with the title