fix likes bar, grid adjustment and menu width

2 files changed, 8 insertions, 14 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 0f2f3cf11..937f25eb6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -26,9 +26,9 @@
   </div>
 
   <!-- Video information -->
-  <div *ngIf="video" class="container-fluid video-bottom">
+  <div *ngIf="video" class="margin-content video-bottom">
     <div class="row fullWidth">
-      <div class="col-12 col-md-9 video-info">
+      <div class="col-12 col-lg-9 video-info">
         <div class="video-info-first-row">
           <div>
             <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
@@ -199,7 +199,7 @@
 
       <my-video-comments [video]="video" [user]="user"></my-video-comments>
     </div>
-    <my-recommended-videos class="ml-3 ml-sm-0 col-12 col-md-3"
+    <my-recommended-videos class="col-12 col-lg-3"
                            [inputVideo]="video" [user]="user"></my-recommended-videos>
     </div>
   </div>
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 912016f8c..633b16c05 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -163,9 +163,9 @@
       }
 
       .video-actions-rates {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        align-items: start;
 
         .video-actions {
           height: 40px; // Align with the title
@@ -442,12 +442,6 @@
       .video-info-first-row {
         flex-direction: column;
         margin-bottom: 20px;
-
-        .video-actions-rates {
-          margin-top: 20px;
-          margin-bottom: 10px;
-          align-items: start;
-        }
       }
 
       .video-info-date-views {
@@ -471,7 +465,7 @@
     flex-direction: column;
   }
 
-  .other-videos {
+  /deep/ .other-videos {
     padding-left: 0 !important;
   }
 
@@ -501,7 +495,7 @@
     }
   }
 
-  .other-videos {
+  /deep/ .other-videos {
     /deep/ .video-miniature  {
       flex-direction: column;
     }