2 rows per overview section

client/src/app/shared/video/video-miniature.component.scss

@@ -10,6 +10,9 @@
   height: 195px;
   vertical-align: top;
 
+  .video-bottom {
+    display: flex;
+
     .video-miniature-information {
       width: 200px;
       line-height: normal;
@@ -56,36 +59,38 @@
       }
     }
 
-  .video-bottom {
-    display: flex;
-
     .video-actions {
       margin-top: 3px;
       margin-right: 10px;
-    }
 
       /deep/ .dropdown-root:not(.show) {
         display: none;
       }
 
-    &:hover /deep/ .dropdown-root {
+      /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
         display: block;
       }
+    }
 
-    /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+    &:hover .video-actions /deep/ .dropdown-root {
       display: block;
     }
 
     @media screen and (max-width: $small-view) {
-      .video-actions {
-        margin-right: 0;
+      .video-miniature-information .video-miniature-name {
+        margin-top: 0;
       }
 
+      .video-actions {
+        margin: 0;
+        top: -3px;
+
         /deep/ .dropdown-root {
           display: block !important;
         }
       }
     }
+  }
 
   &.display-as-row {
     flex-direction: row;
@@ -97,6 +102,7 @@
       margin-right: 10px;
     }
 
+    .video-bottom {
       .video-miniature-information {
         width: auto;
         min-width: 500px;
@@ -124,10 +130,11 @@
         }
       }
 
-    .video-bottom .video-actions {
+      .video-actions {
         margin: 0;
         top: -3px;
       }
+    }
 
     @media screen and (max-width: $small-view) {
       flex-direction: column;

client/src/app/videos/video-list/video-overview.component.scss

@@ -3,6 +3,8 @@
 @import '_miniature';
 
 .section {
+  max-height: 500px; // 2 rows max
+  overflow: hidden;
   padding-top: 10px;
 
   &:first-child {
@@ -44,11 +46,18 @@
 }
 
 @media screen and (max-width: 500px) {
+  .margin-content {
+    margin: 0 !important;
+  }
+
   .section-title {
     font-size: 17px;
   }
 
   .section {
+    max-height: initial;
+    overflow: initial;
+
     @include video-miniature-small-screen;
   }
 }

server/controllers/api/overviews.ts

@@ -94,7 +94,7 @@ async function getVideos (
 ) {
   const query = Object.assign({
     start: 0,
-    count: 10,
+    count: 12,
     sort: '-createdAt',
     includeLocalVideos: true,
     nsfw: buildNSFWFilter(res),