fix likes bar, grid adjustment and menu width

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>

client/src/app/videos/+video-watch/video-watch.component.scss

@@ -163,9 +163,9 @@
       }
 
       .video-actions-rates {
-        display: flex;
+        margin-top: 20px;
-        flex-direction: column;
+        margin-bottom: 10px;
-        align-items: flex-end;
+        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;
     }

client/src/sass/application.scss

@@ -302,12 +302,23 @@ table {
   font-weight: $font-semibold;
 }
 
+@media screen and (max-width: 1000px) {
+  .main-col {
+    &.expanded {
+      .margin-content {
+        margin-left: $expanded-horizontal-margins/2;
+        margin-right: $expanded-horizontal-margins/2;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 900px) {
   .main-col {
-    &, &.expanded {
+    &.expanded {
       .margin-content {
-        margin-left: 50px;
+        margin-left: $expanded-horizontal-margins/3;
-        margin-right: 50px;
+        margin-right: $expanded-horizontal-margins/3;
       }
 
       .sub-menu {
@@ -327,6 +338,10 @@ table {
     z-index: 10000;
   }
 
+  menu {
+    width: $menu-width;
+  }
+
   .main-col {
     margin-left: 0;
 

client/src/sass/include/_bootstrap.scss

@@ -4,6 +4,26 @@ $zindex-modal: 10005;
 $modal-footer-border-width: 0;
 $modal-md: 600px;
 
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 576px,
+  // Medium screen / tablet
+  md: 768px,
+  // Large screen / desktop
+  lg: 900px,
+  // Extra large screen / wide desktop
+  xl: 1200px
+);
+
+$container-max-widths: (
+  sm: 420px,
+  md: 720px,
+  lg: 900px,
+  xl: 1140px
+);
+
 $input-btn-focus-width: 0;
 $input-btn-focus-color: inherit;
 $input-focus-border-color: #ced4da;