Refactor video miniature

Less dirty code, better responsive
Prepare for some regressions
Increase default miniature size

38 files changed, 688 insertions, 626 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 19a4b3c9c..96780e938 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -39,6 +39,7 @@
         <my-video-miniature
           *ngFor="let video of getVideosOf(videoChannel)"
           [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
+          thumbnailSize="medium"
         ></my-video-miniature>
 
         <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 8f1e9deb5..7e88802f3 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -3,7 +3,7 @@
 @import '_miniature';
 
 .margin-content {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 }
 
 .channel {
@@ -93,6 +93,8 @@ my-subscribe-button {
 
   my-video-miniature {
     margin-right: 15px;
+    min-width: $video-thumbnail-medium-width;
+    max-width: $video-thumbnail-medium-width;
   }
 
   .no-results {
@@ -105,7 +107,7 @@ my-subscribe-button {
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
-  padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px;
+  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
   z-index: z(miniature) + 1;
 
   a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index d7213df1d..a836e84ce 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,7 +15,7 @@
 }
 
 .links {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 
   display: flex;
   justify-content: space-between;
@@ -44,7 +44,7 @@ my-user-moderation-dropdown,
 }
 
 .account-info {
-  @include fluid-videos-miniature-margins(false, 15px);
+  @include grid-videos-miniature-margins(false, 15px);
 
   display: grid;
   grid-template-columns: 1fr min-content;
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index c180161e7..9dec64645 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -4,7 +4,7 @@
 </h1>
 
 <div class="top-buttons">
-  <div>
+  <div class="search-wrapper">
     <div class="input-group has-feedback has-clear">
       <input
         type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div class="history-switch ml-auto mr-3">
+  <div class="history-switch">
     <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
     <label i18n>Track watch history</label>
   </div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 928a8a3da..af4a34b4b 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -11,16 +11,24 @@
 
 .top-buttons {
   margin-bottom: 30px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 250px 1fr auto auto;
   align-items: center;
-  flex-wrap: wrap;
 
-  #history-search {
-    @include peertube-input-text(250px);
+  .search-wrapper {
+    grid-column: 1;
+
+    input {
+      @include peertube-input-text(250px);
+    }
   }
 
   .history-switch {
+    grid-column: 3;
+
     display: flex;
+    margin-left: auto;
+    margin-right: 15px;
 
     label {
       margin: 0 0 0 5px;
@@ -31,6 +39,8 @@
   }
 
   .delete-history {
+    grid-column: 4;
+
     @include peertube-button;
     @include grey-button;
     @include button-with-icon;
@@ -40,26 +50,27 @@
 }
 
 .video {
-  @include row-blocks;
-
-  .my-video-miniature {
-    flex-grow: 1;
-  }
+  @include row-blocks($column-responsive: false);
 }
 
-@media screen and (max-width: $mobile-view) {
+@media screen and (max-width: $small-view) {
   .top-buttons {
-    .history-switch label, .delete-history {
-      @include ellipsis;
-    }
+    grid-template-columns: auto 1fr auto;
+    row-gap: 20px;
 
-    .history-switch label {
-      width: 60%;
+    .history-switch {
+      grid-row: 1;
+      grid-column: 1;
+      margin: 0;
     }
 
     .delete-history {
-      margin-left: auto;
-      max-width: 32%;
+      grid-row: 1;
+      grid-column: 3;
+    }
+
+    .search-wrapper {
+      grid-column: 1 / 4;
     }
   }
 }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 510b400c0..ff448ad87 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -6,7 +6,7 @@
   </span>
 </h1>
 
-<div class="video-subscriptions-header d-flex justify-content-between">
+<div class="video-subscriptions-header">
   <div class="has-feedback has-clear">
     <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
       (ngModelChange)="onSubscriptionsSearchChanged()" />
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 9fc8be86c..3c1a4d2ad 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -13,36 +13,36 @@ input[type=text] {
 
     margin-right: 10px;
   }
+}
 
-  .video-channel-info {
-    flex-grow: 1;
-
-    a.video-channel-names {
-      @include disable-default-a-behaviour;
-
-      width: fit-content;
-      display: flex;
-      align-items: baseline;
-      color: pvar(--mainForegroundColor);
-
-      .video-channel-display-name {
-        font-weight: $font-semibold;
-        font-size: 18px;
-      }
-
-      .video-channel-name {
-        font-size: 14px;
-        color: $grey-actor-name;
-        margin-left: 5px;
-      }
+.video-channel-info {
+  flex-grow: 1;
+
+  a.video-channel-names {
+    @include disable-default-a-behaviour;
+
+    width: fit-content;
+    display: flex;
+    align-items: baseline;
+    color: pvar(--mainForegroundColor);
+
+    .video-channel-display-name {
+      font-weight: $font-semibold;
+      font-size: 18px;
+    }
+
+    .video-channel-name {
+      font-size: 14px;
+      color: $grey-actor-name;
+      margin-left: 5px;
     }
   }
+}
 
-  .actor-owner {
-    @include actor-owner;
+.actor-owner {
+  @include actor-owner;
 
-    margin-top: 0;
-  }
+  margin-top: 0;
 }
 
 .video-subscriptions-header {
@@ -50,32 +50,22 @@ input[type=text] {
 }
 
 @media screen and (max-width: $small-view) {
-  .video-channel {
-    .video-channel-info {
-      padding-bottom: 10px;
-      text-align: center;
-
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-      }
-    }
-
-    img {
-      margin-right: 0;
-    }
+  .video-subscriptions-header input[type=text] {
+    width: 100% !important;
   }
-}
 
-@media screen and (max-width: $mobile-view) {
-  .video-subscriptions-header {
-    flex-direction: column;
+  .video-channel-info {
+    padding-bottom: 10px;
+    text-align: center;
 
-    input[type=text] {
-      width: 100% !important;
+    .video-channel-names {
+      flex-direction: column;
+      align-items: center !important;
+      margin: auto;
     }
   }
-}
-
 
+  img {
+    margin-right: 0;
+  }
+}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index a97b2b4fb..e7e3c17b3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -1,6 +1,6 @@
-<div class="row">
+<div class="root">
 
-  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+  <div class="playlist-info">
     <my-video-playlist-miniature
       *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
       [displayDescription]="true" [displayPrivacy]="true"
@@ -20,7 +20,7 @@
 
   </div>
 
-  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+  <div class="playlist-elements">
     <div class="no-results" *ngIf="pagination.totalItems === 0">
       <div i18n>No videos in this playlist.</div>
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 87a836a46..0c68dedf6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -2,17 +2,21 @@
 @import '_mixins';
 @import '_miniature';
 
+.root {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
 .playlist-info {
+  grid-column: 1;
   background-color: pvar(--submenuBackgroundColor);
   margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
   margin-top: -$sub-menu-margin-bottom;
 
-  padding: 10px;
+  padding: 15px;
 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
 
   /* fix ellipsis dots background color */
   ::ng-deep .miniature-name::after {
@@ -59,15 +63,35 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-@media screen and (max-width: $small-view) {
+.playlist-elements {
+  grid-column: 2;
+}
+
+my-video-playlist-miniature {
+  width: $video-thumbnail-width;
+}
+
+@include on-small-main-col {
+  my-video-playlist-miniature {
+    width: $video-thumbnail-medium-width;
+  }
+}
+
+@include on-mobile-main-col {
+  .root {
+    display: block;
+  }
+
   .playlist-info {
-    width: 100vw;
+    width: calc(100% + (2 * var(--horizontalMarginContent)));
     padding-top: 20px;
     margin-bottom: 10px;
   }
 
-  .playlist-elements {
-    padding: 0 !important;
+  my-video-playlist-miniature,
+  .playlist-buttons {
+    margin-left: auto;
+    margin-right: auto;
   }
 
   ::ng-deep my-video-playlist-element-miniature {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index afcf6a084..b88ea3db7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,6 @@
 <h1>
-  <span>
-    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
-  </span>
+  <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="video-playlists-header d-flex justify-content-between">
@@ -21,10 +19,10 @@
 
 <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
-    <div class="miniature-wrapper">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
-      ></my-video-playlist-miniature>
-    </div>
+    <my-video-playlist-miniature
+      [playlist]="playlist" [toManage]="true" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
+    ></my-video-playlist-miniature>
 
     <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
       <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..94187efd4 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+h1 {
+  display: flex;
+}
+
 .create-button {
   @include create-button;
 }
@@ -9,64 +13,45 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
-
 .video-playlist {
-  @include row-blocks;
-
-  .miniature-wrapper {
-    flex-grow: 1;
-
-    ::ng-deep .miniature {
-      display: flex;
-
-      .miniature-info {
-        margin-left: 10px;
-        width: auto;
-      }
-    }
-  }
+  @include row-blocks($column-responsive: false);
+}
 
-  .video-playlist-buttons {
-    min-width: 190px;
-    height: max-content;
-  }
+.video-playlist-buttons {
+  display: flex;
+  margin-left: 10px;
+  align-self: flex-end;
 }
 
 .video-playlists-header {
   margin-bottom: 30px;
 }
 
-@media screen and (max-width: $small-view) {
+my-video-playlist-miniature {
+  display: block;
+  flex-grow: 1;
+}
+
+my-delete-button {
+  margin-right: 10px;
+}
+
+@include on-small-main-col {
   .video-playlists-header {
     text-align: center;
   }
 
   .video-playlist {
-
-    .video-playlist-buttons {
-      margin-top: 10px;
-    }
+    flex-wrap: wrap;
   }
 
-  my-video-playlist-miniature ::ng-deep .miniature {
-    flex-direction: column;
-
-    .miniature-info {
-      margin-left: 0 !important;
-    }
-
-    .miniature-name {
-      max-width: $video-thumbnail-width;
-    }
+  .video-playlist-buttons {
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .video-playlists-header {
     flex-direction: column;
 
@@ -75,4 +60,8 @@ input[type=text] {
       margin-bottom: 12px;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 57473896b..a03baa056 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -32,36 +32,9 @@ h1 {
   }
 }
 
-::ng-deep {
-  .video {
-    flex-wrap: wrap;
-  }
-
-  .action-button span {
-    white-space: nowrap;
-  }
-
-  .video-miniature {
-    &.display-as-row {
-      // width: min-content !important;
-      width: 100% !important;
-
-      .video-bottom .video-miniature-information {
-        width: max-content !important;
-        min-width: unset !important;
-      }
-    }
-
-    .video-bottom {
-      max-width: 350px;
-    }
-  }
-}
-
 .action-button {
   display: flex;
-  margin-left: 55px;
-  margin-top: 10px;
+  margin-left: 10px;
   align-self: flex-end;
 }
 
@@ -69,7 +42,7 @@ my-edit-button {
   margin-right: 10px;
 }
 
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
   h1 {
     flex-direction: column;
 
@@ -80,39 +53,12 @@ my-edit-button {
   }
 
   .action-button {
-    flex-direction: column;
-    align-self: center;
-    align-items: center;
-    margin-left: 0px;
-  }
-
-  my-edit-button {
-    margin: 15px 0 5px 0;
-    width: 100%;
-    text-align: center;
-
-    ::ng-deep {
-      .action-button {
-        /* same width than a.video-thumbnail */
-        width: $video-thumbnail-width;
-      }
-    }
-  }
-
-  ::ng-deep {
-    .video-miniature {
-      align-items: center;
-
-      .video-bottom,
-      .video-bottom .video-miniature-information {
-        /* same width than a.video-thumbnail */
-        max-width: $video-thumbnail-width !important;
-      }
-    }
+    margin-top: 10px;
+    margin-left: auto;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .videos-header {
     flex-direction: column;
 
@@ -120,4 +66,8 @@ my-edit-button {
       width: 100% !important;
     }
   }
+
+  .action-button {
+    margin-left: 0;
+  }
 }
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index 594935afd..b69d1682a 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,13 +1,13 @@
 <div class="margin-content">
-  <div i18n class="title-page title-page-single">
+  <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
     Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
   </div>
 
   <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
-  <div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
-    <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container">
-      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+  <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
+    <div *ngFor="let playlist of videoPlaylists" class="playlist-wrapper">
+      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false" [displayAsRow]="displayAsRow()"></my-video-playlist-miniature>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index cb2931858..3dd35ef3f 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,14 +1,33 @@
-.title-page {
-  margin-top: 0;
-}
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
 
-.video-playlist {
+.playlists {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 
-  .playlist-miniature-container {
+  .playlist-wrapper {
     margin-right: 15px;
     margin-bottom: 30px;
   }
 }
+
+.margin-content {
+  @include grid-videos-miniature-layout;
+}
+
+@media screen and (max-width: $mobile-view) {
+  .title-page {
+    display: block;
+    text-align: center;
+  }
+
+  .playlists {
+    text-align: left !important;
+    justify-content: left !important;
+
+    margin-left: pvar(--horizontalMarginContent) !important;
+    margin-right: var(--horizontalMarginContent) !important;
+  }
+}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index 8b507c626..14465bb8d 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -1,6 +1,6 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems } from '@app/core'
+import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 
@@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
 
   constructor (
     private videoPlaylistService: VideoPlaylistService,
-    private videoChannelService: VideoChannelService
+    private videoChannelService: VideoChannelService,
+    private screenService: ScreenService
   ) {}
 
   ngOnInit () {
@@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
     this.loadVideoPlaylists()
   }
 
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
+
   private loadVideoPlaylists () {
     this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
         .subscribe(res => {
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 3b27f3aa1..ce33e7be6 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -16,11 +16,11 @@
 }
 
 .links {
-  @include fluid-videos-miniature-margins;
+  @include grid-videos-miniature-margins;
 }
 
 .channel-info {
-  @include fluid-videos-miniature-margins(false, 15px);
+  @include grid-videos-miniature-margins(false, 15px);
 
   display: grid;
   grid-template-columns: 1fr auto;
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index 3c7c679b8..e0e9f92e7 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -1,4 +1,4 @@
-<div class="other-videos">
+<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
   <ng-container *ngIf="hasVideos$ | async">
     <div class="title-page-container">
       <h2 i18n class="title-page title-page-single">
@@ -14,7 +14,7 @@
 
     <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
       <my-video-miniature
-        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature"
+        [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
         (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
       </my-video-miniature>
 
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index b278c9654..c9fae6f27 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .title-page-container {
   display: flex;
   justify-content: space-between;
@@ -11,6 +14,10 @@
   }
 }
 
+.title-page {
+  margin-top: 0;
+}
+
 .title-page-autoplay {
   display: flex;
   width: max-content;
@@ -29,3 +36,29 @@
 hr {
   margin-top: 0;
 }
+
+my-video-miniature {
+  display: block;
+}
+
+.other-videos:not(.display-as-row) my-video-miniature {
+  min-width: $video-thumbnail-medium-width;
+  max-width: $video-thumbnail-medium-width;
+}
+
+.display-as-row {
+  my-video-miniature {
+    margin-bottom: 20px;
+  }
+
+  hr {
+    display: none;
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    my-video-miniature {
+      margin-bottom: 10px;
+    }
+  }
+}
+
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
index a1c8e0661..89b9c01b6 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
@@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store'
 export class RecommendedVideosComponent implements OnInit, OnChanges {
   @Input() inputRecommendation: RecommendationInfo
   @Input() playlist: VideoPlaylist
+  @Input() displayAsRow: boolean
+
   @Output() gotRecommendations = new EventEmitter<Video[]>()
 
   autoPlayNextVideo: boolean
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 07f7ab7e3..5d417609a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -289,6 +289,7 @@
     </div>
 
     <my-recommended-videos
+      [displayAsRow]="displayOtherVideosAsRow()"
       [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
       [playlist]="playlist"
       (gotRecommendations)="onRecommendations($event)"
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 a67605217..f22ffc0ea 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -407,37 +407,12 @@ $video-info-margin-left: 44px;
       }
     }
   }
+}
 
-  ::ng-deep .other-videos {
-    padding-left: 15px;
-    min-width: $video-miniature-width;
-
-    @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
-      width: min-content;
-    }
-
-    .title-page {
-      margin: 0 !important;
-    }
-
-    .video-miniature {
-      display: flex;
-      width: max-content;
-      height: 100%;
-      padding-bottom: 20px;
-      flex-wrap: wrap;
-    }
-
-    .video-bottom {
-      @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-        margin-left: 1rem;
-      }
-      @media screen and (max-width: 500px) {
-        margin-left: 0;
-        margin-top: .5rem;
-      }
-    }
-  }
+my-recommended-videos {
+  display: block;
+  padding-left: 15px;
+  min-width: 250px;
 }
 
 my-video-comments {
@@ -531,6 +506,7 @@ my-video-comments {
   }
 }
 
+// Use the same breakpoint than in the typescript component to display the other video miniatures as row
 @media screen and (max-width: 1100px) {
   #video-wrapper {
     flex-direction: column;
@@ -543,15 +519,10 @@ my-video-comments {
 
   .video-bottom {
     flex-direction: column;
+  }
 
-    ::ng-deep .other-videos {
-      padding-left: 0 !important;
-
-      ::ng-deep .video-miniature  {
-        flex-direction: row;
-        width: auto;
-      }
-    }
+  my-recommended-videos {
+    padding-left: 0;
   }
 }
 
@@ -573,10 +544,6 @@ my-video-comments {
     }
   }
 
-  ::ng-deep .other-videos .video-miniature  {
-    flex-direction: column;
-  }
-
   .privacy-concerns {
     width: 100%;
   }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 075f70f56..9656f08e9 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -398,6 +398,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.loadVideo(videoId)
   }
 
+  displayOtherVideosAsRow () {
+    // Use the same value as in the SASS file
+    return this.screenService.getWindowInnerWidth() <= 1100
+  }
+
   private loadVideo (videoId: string) {
     // Video did not change
     if (this.video && this.video.uuid === videoId) return
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index ca986c634..639a96c43 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -14,7 +14,7 @@
         </h1>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
           </my-video-miniature>
         </div>
       </div>
@@ -25,7 +25,7 @@
         </h2>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
           </my-video-miniature>
         </div>
       </div>
@@ -40,7 +40,7 @@
         </div>
 
         <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
-          <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true">
+          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
           </my-video-miniature>
         </div>
       </div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index c1d10188a..ec73c628c 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,9 +8,84 @@
 }
 
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
 }
 
 .section {
-  @include miniature-rows;
+  &:first-child {
+    padding-top: 30px;
+
+    .section-title {
+      border-top: none !important;
+    }
+  }
+
+  .section-title {
+    font-size: 24px;
+    font-weight: $font-semibold;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    &:not(h2) {
+      border-top: 1px solid $separator-border-color;
+    }
+
+    a {
+      &:hover, &:focus:not(.focus-visible), &:active {
+        text-decoration: none;
+        outline: none;
+      }
+
+      color: pvar(--mainForegroundColor);
+    }
+  }
+
+  &.channel {
+    .section-title {
+      a {
+        display: flex;
+        width: fit-content;
+        align-items: center;
+
+        img {
+          @include channel-avatar(28px);
+
+          margin-right: 8px;
+        }
+      }
+
+      .followers {
+        color: pvar(--greyForegroundColor);
+        font-weight: normal;
+        font-size: 14px;
+        margin-left: 10px;
+        position: relative;
+        top: 2px;
+      }
+    }
+  }
+
+  .show-more {
+    position: relative;
+    top: -5px;
+    display: inline-block;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: pvar(--greyForegroundColor);
+    margin-bottom: 10px;
+    font-weight: $font-semibold;
+    text-decoration: none;
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    max-height: initial;
+    overflow: initial;
+
+    .section-title {
+      font-size: 17px;
+      margin-left: 10px;
+    }
+  }
 }
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index a085e5bdc..c133b5fe9 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -38,11 +38,10 @@ export class ScreenService {
 
     let numberOfVideos = 1
 
-    if (screenWidth > 1850) numberOfVideos = 7
-    else if (screenWidth > 1600) numberOfVideos = 6
-    else if (screenWidth > 1370) numberOfVideos = 5
-    else if (screenWidth > 1100) numberOfVideos = 4
-    else if (screenWidth > 850) numberOfVideos = 3
+    if (screenWidth > 1850) numberOfVideos = 5
+    else if (screenWidth > 1600) numberOfVideos = 4
+    else if (screenWidth > 1370) numberOfVideos = 3
+    else if (screenWidth > 1100) numberOfVideos = 2
 
     return numberOfVideos
   }
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 41d5906cf..81c773b5a 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -52,7 +52,7 @@
 
       <div class="video-wrapper">
         <my-video-miniature
-          [fitWidth]="true" [video]="video" [user]="userMiniature"
+          [video]="video" [user]="userMiniature"
           [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
           (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
         >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 0a8aa8fa4..26c412402 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -69,7 +69,7 @@ $iconSize: 16px;
 }
 
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include grid-videos-miniature-layout;
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index a07930321..efa443b45 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
   <my-video-thumbnail
     [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a9628c696..39d6e97c9 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -3,204 +3,206 @@
 @import '_miniature';
 
 $more-button-width: 40px;
-$more-margin-right: 15px;
 
-.video-miniature {
-  display: inline-flex;
-  flex-direction: column;
-  padding-bottom: $video-miniature-margin-bottom;
-  vertical-align: top;
+.video-miniature-name {
+  @include miniature-name;
+}
 
-  .video-bottom {
-    display: flex;
+.video-miniature-information {
+  width: calc(100% - #{$more-button-width});
+}
 
-    .video-miniature-information {
-      width: $video-miniature-width - $more-button-width - $more-margin-right;
-      line-height: normal;
+.avatar {
+  margin: 10px 10px 0 0;
 
-      .avatar {
-        margin: 10px 10px 0 0;
+  img:not(.channel) {
+    @include avatar(40px);
+  }
 
-        img:not(.channel) {
-          @include avatar(40px);
-        }
+  img.channel {
+    @include channel-avatar(40px);
+  }
+}
 
-        img.channel {
-          @include channel-avatar(40px);
-        }
-      }
+.video-miniature-created-at-views {
+  font-size: 13px;
+}
 
-      .video-miniature-name {
-        @include miniature-name;
+.video-miniature-account,
+.video-miniature-channel {
+  @include disable-default-a-behaviour;
+  @include ellipsis;
 
-        word-wrap: break-word;
-        width: calc(100% - #{$more-button-width});
-      }
+  display: block;
+  font-size: 13px;
+  color: pvar(--greyForegroundColor);
 
-      .video-miniature-meta {
-        width: calc(100% + #{$more-button-width});
-        overflow: hidden;
-      }
+  &:hover {
+    color: $grey-foreground-hover-color;
+  }
+}
 
-      .video-miniature-created-at-views {
-        display: block;
-        font-size: 13px;
-      }
+.video-info-privacy,
+.video-info-blocked .blocked-label,
+.video-info-nsfw {
+  font-weight: $font-semibold;
+}
 
-      .video-miniature-account,
-      .video-miniature-channel {
-        @include disable-default-a-behaviour;
-        @include ellipsis;
+.video-info-blocked {
+  color: red;
 
-        display: block;
-        font-size: 13px;
-        color: pvar(--greyForegroundColor);
+  .blocked-reason::before {
+    content: ' - ';
+  }
+}
 
-        &:hover {
-          color: $grey-foreground-hover-color;
-        }
-      }
+.video-info-nsfw {
+  color: red;
+}
 
-      .video-info-privacy,
-      .video-info-blocked .blocked-label,
-      .video-info-nsfw {
-        font-weight: $font-semibold;
-      }
+.video-actions {
+  width: $more-button-width;
+  height: 30px;
 
-      .video-info-blocked {
-        color: red;
+  ::ng-deep .dropdown-root:not(.show) {
+    opacity: 0;
+  }
 
-        .blocked-reason::before {
-          content: ' - ';
-        }
-      }
+  ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+    opacity: 1;
+  }
 
-      .video-info-nsfw {
-        color: red;
-      }
-    }
+  ::ng-deep .more-icon {
+    opacity: .6;
 
-    .video-actions {
-      margin-top: 3px;
-      width: $more-button-width;
-      height: 30px;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
 
-      ::ng-deep .dropdown-root:not(.show) {
-        opacity: 0;
-      }
+.video-miniature {
+  &:hover ::ng-deep .video-thumbnail-actions-overlay,
+  &:hover .video-actions ::ng-deep .dropdown-root {
+    opacity: 1 !important;
+  }
+}
 
-      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        opacity: 1;
-      }
+// Grid mode
+// Takes all the width on mobile
+.video-miniature:not(.display-as-row) {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: $video-miniature-margin-bottom;
+  width: 100%;
 
-      ::ng-deep .more-icon {
-        opacity: .6;
+  my-video-thumbnail {
+    @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+  }
 
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
+  .video-bottom {
+    display: flex;
+    width: 100%;
+  }
 
-    @media screen and (max-width: $small-view) {
-      .video-miniature-information {
-        margin: 0 10px;
-      }
 
-      .video-actions {
-        margin: 0;
-        top: -3px;
+  .video-miniature-name {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
 
-        ::ng-deep .dropdown-root {
-          opacity: 1 !important;
-        }
-      }
-    }
+  .video-miniature-created-at-views {
+    display: block;
   }
 
-  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
-  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
-    opacity: 1;
+  .video-actions {
+    margin-top: 3px;
   }
 
-  &.fit-width {
+  @media screen and (max-width: $small-view) {
     width: 100%;
+    margin-bottom: 25px;
+
+    .video-miniature-information {
+      margin: 0 10px;
+
+      width: 100%;
+      text-align: left;
+    }
 
-    .video-bottom {
-      width: 100% !important;
+    .video-actions {
+      margin: 0;
+      top: -3px;
 
-      .video-miniature-information {
-        width: calc(100% - #{$more-button-width}) !important;
+      ::ng-deep .dropdown-root {
+        opacity: 1 !important;
       }
     }
 
-    my-video-thumbnail {
-      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    ::ng-deep .video-thumbnail {
+      border-radius: 0;
     }
   }
+}
+
+.video-miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+
+  display: flex;
+  flex-direction: row;
 
-  &.display-as-row {
-    flex-direction: row;
-    padding-bottom: 0;
-    height: auto;
+  .video-bottom {
     display: flex;
-    flex-grow: 1;
+  }
 
-    my-video-thumbnail {
-      margin-right: 10px;
-    }
+  // We don't display avatar in row mode
+  .avatar {
+    display: none;
+  }
 
-    .video-bottom {
-      .video-miniature-information {
-        @media screen and (min-width: $small-view) {
-          width: auto;
-          min-width: 500px;
-        }
-
-        .video-miniature-name {
-          @include ellipsis-multiline(1.3em, 2);
-
-          margin-top: 2px;
-          margin-bottom: 5px;
-        }
-
-        .video-miniature-created-at-views,
-        .video-miniature-account,
-        .video-miniature-channel {
-          font-size: 95%;
-          width: fit-content;
-        }
-
-        .video-miniature-created-at-views + .video-miniature-channel {
-          margin-top: 5px;
-        }
-
-        .video-info-privacy {
-          margin-top: 5px;
-        }
-
-        .video-info-blocked {
-          margin-top: 3px;
-        }
-      }
+  my-video-thumbnail {
+    min-width: var(--rowThumbnailWidth);
+    max-width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
 
-      .video-actions {
-        margin: 0;
-        top: -3px;
-      }
-    }
+  .video-miniature-name {
+    @include ellipsis-multiline(1.3em, 2);
+  }
+
+  .video-miniature-created-at-views,
+  .video-miniature-account,
+  .video-miniature-channel {
+    font-size: 14px;
+  }
 
-    @media screen and (max-width: $small-view) {
-      flex-direction: column;
-      height: auto;
+  .video-actions {
+    margin-top: -3px;
+  }
+}
 
-      my-video-thumbnail {
-        margin-right: 0;
-      }
+@include on-small-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
 
-      .video-miniature-information {
-        min-width: initial;
-      }
+@include on-mobile-main-col {
+  .video-miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
+
+    .video-miniature-name {
+      font-size: 14px;
+    }
+
+    .video-miniature-created-at-views,
+    .video-miniature-account,
+    .video-miniature-channel {
+      font-size: 12px;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 987a65e40..48da92d6b 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,6 @@ import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
 
-export type OwnerDisplayType = 'account' | 'videoChannel'
 export type MiniatureDisplayOptions = {
   date?: boolean
   views?: boolean
@@ -50,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
     state: false,
     blacklistInfo: false
   }
-  @Input() displayAsRow = false
   @Input() displayVideoActions = true
-  @Input() fitWidth = false
+
+  @Input() displayAsRow = false
 
   @Input() videoLinkType: VideoLinkType = 'internal'
 
@@ -243,6 +242,12 @@ export class VideoMiniatureComponent implements OnInit {
     return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
   }
 
+  getClasses () {
+    return {
+      'display-as-row': this.displayAsRow
+    }
+  }
+
   private setUpBy () {
     const accountName = this.video.account.name
 
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
   display: flex;
   justify-content: flex-end;
   flex-grow: 1;
+}
 
-  .action-selection-mode-child {
-    position: fixed;
-
-    .action-button {
-      display: block;
-      margin-left: 55px;
-    }
+.action-selection-mode-child {
+  position: fixed;
 
-    .action-button-cancel-selection {
-      @include peertube-button;
-      @include grey-button;
-    }
+  .action-button {
+    display: block;
+    margin-left: 55px;
   }
 }
 
+.action-button-cancel-selection {
+  @include peertube-button;
+  @include grey-button;
+}
+
 .video {
-  @include row-blocks;
+  @include row-blocks($column-responsive: false);
 
   &:first-child {
     margin-top: 47px;
@@ -40,18 +40,16 @@
   }
 }
 
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
 
-    .checkbox-container {
-      display: none;
-    }
+@include on-small-main-col {
+  .video {
+    flex-wrap: wrap;
+  }
+}
 
-    my-button {
-      margin-top: 10px;
-    }
+@include on-mobile-main-col {
+  .checkbox-container {
+    display: none;
   }
 
   .action-selection-mode {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 86f6664cb..f50f95003 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }">
+<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
   <a
     [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
     class="miniature-thumbnail"
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 1b16dbb01..c5be5f292 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -4,6 +4,7 @@
 
 .miniature {
   display: inline-block;
+  width: 100%;
 
   &.no-videos:not(.to-manage){
     a {
@@ -17,62 +18,92 @@
       display: none;
     }
   }
+}
 
-  .miniature-thumbnail {
-    @include miniature-thumbnail;
-
-    .miniature-playlist-info-overlay {
-      @include static-thumbnail-overlay;
-
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      height: $video-thumbnail-height;
-      padding: 0 10px;
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      font-weight: $font-semibold;
-    }
+.miniature-thumbnail {
+  @include miniature-thumbnail;
+
+  .miniature-playlist-info-overlay {
+    @include static-thumbnail-overlay;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: $font-semibold;
   }
+}
 
-  .miniature-info {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
-
-    .miniature-name {
-      @include miniature-name;
+.miniature-info {
 
-      @include ellipsis-multiline(1.3em, 2);
+  .miniature-name {
+    @include miniature-name;
+    @include ellipsis-multiline(1.3em, 2);
 
-      margin: 0;
-    }
+    margin: 0;
+  }
 
-    .by {
-      @include disable-default-a-behaviour;
+  .by {
+    @include disable-default-a-behaviour;
 
-      display: block;
-      color: pvar(--greyForegroundColor);
-    }
+    display: block;
+    color: pvar(--greyForegroundColor);
+  }
 
-    .privacy-date {
-      margin-top: 5px;
+  .privacy-date {
+    margin-top: 5px;
 
-      .video-info-privacy {
-        font-size: 14px;
-        font-weight: $font-semibold;
+    .video-info-privacy {
+      font-size: 14px;
+      font-weight: $font-semibold;
 
-        &::after {
-          content: '-';
-          margin: 0 3px;
-        }
+      &::after {
+        content: '-';
+        margin: 0 3px;
       }
     }
+  }
 
-    .video-info-description {
-      margin-top: 10px;
-      color: pvar(--greyForegroundColor);
-    }
+  .video-info-description {
+    margin-top: 10px;
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.miniature:not(.display-as-row) {
+  .miniature-thumbnail {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+}
+
+.miniature.display-as-row {
+  --rowThumbnailWidth: #{$video-thumbnail-width};
+  --rowThumbnailHeight: #{$video-thumbnail-height};
+
+  display: flex;
+
+  .miniature-thumbnail {
+    width: var(--rowThumbnailWidth);
+    height: var(--rowThumbnailHeight);
+    margin-right: 10px;
+  }
+}
+
+@include on-small-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-medium-width};
+    --rowThumbnailHeight: #{$video-thumbnail-medium-height};
+  }
+}
+
+@include on-mobile-main-col {
+  .miniature.display-as-row {
+    --rowThumbnailWidth: #{$video-thumbnail-small-width};
+    --rowThumbnailHeight: #{$video-thumbnail-small-height};
   }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 251aa868a..6b0b1056f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
   @Input() displayChannel = false
   @Input() displayDescription = false
   @Input() displayPrivacy = false
+  @Input() displayAsRow = false
 
   getPlaylistUrl () {
     if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c35574568..4964ec85e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -58,6 +58,7 @@ body {
   --activatedActionButtonColor: #{$activated-action-button-color};
 
   --horizontalMarginContent: #{$not-expanded-horizontal-margins};
+  --videosHorizontalMarginContent: 6vw;
   --mainColWidth: calc(100vw - #{$menu-width});
 
   font-family: $main-fonts;
@@ -332,8 +333,16 @@ ngx-loading-bar {
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {
-  .main-col.expanded {
-    --horizontalMarginContent: #{$expanded-horizontal-margins/2};
+  .main-col {
+    & {
+      --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
+    }
+
+    &.expanded {
+      --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
+    }
+
+    --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
   }
 }
 
@@ -341,7 +350,7 @@ ngx-loading-bar {
   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
   .main-col,
   .main-col.expanded {
-    --horizontalMarginContent: #{$expanded-horizontal-margins/3};
+    --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 
     .sub-menu {
       padding-left: 50px;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 7643a6816..9e1fc63e3 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -5,11 +5,10 @@
   @include ellipsis-multiline(1.1em, 2);
 
   word-break: break-all;
+  word-wrap: break-word;
   transition: color 0.2s;
   font-weight: $font-semibold;
   color: pvar(--mainForegroundColor);
-  margin-top: 10px;
-  margin-bottom: 5px;
 
   &:hover {
     text-decoration: none;
@@ -21,20 +20,20 @@
   }
 }
 
-$play-overlay-transition: 0.2s ease;
-$play-overlay-height: 26px;
-$play-overlay-width: 18px;
-
 @mixin miniature-thumbnail {
   @include disable-outline;
 
+  $play-overlay-transition: 0.2s ease;
+  $play-overlay-height: 26px;
+  $play-overlay-width: 18px;
+
   display: flex;
   flex-direction: column;
   position: relative;
   border-radius: 3px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  width: $video-thumbnail-width;
-  height: $video-thumbnail-height;
   background-color: #ececec;
   transition: filter $play-overlay-transition;
 
@@ -98,140 +97,36 @@ $play-overlay-width: 18px;
   color: #fff;
 }
 
-@mixin miniature-rows {
-  &:first-child {
-    padding-top: 30px;
-
-    .section-title {
-      border-top: none !important;
-    }
-  }
-
-  .section-title {
-    font-size: 24px;
-    font-weight: $font-semibold;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
-
-    &:not(h2) {
-      border-top: 1px solid $separator-border-color;
-    }
-
-    a {
-      &:hover, &:focus:not(.focus-visible), &:active {
-        text-decoration: none;
-        outline: none;
-      }
-
-      color: pvar(--mainForegroundColor);
-    }
-  }
-
-  &.channel {
-    .section-title {
-      a {
-        display: flex;
-        width: fit-content;
-        align-items: center;
-
-        img {
-          @include channel-avatar(28px);
-
-          margin-right: 8px;
-        }
-      }
-
-      .followers {
-        color: pvar(--greyForegroundColor);
-        font-weight: normal;
-        font-size: 14px;
-        margin-left: 10px;
-        position: relative;
-        top: 2px;
-      }
-    }
-  }
-
-  .show-more {
-    position: relative;
-    top: -5px;
-    display: inline-block;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: pvar(--greyForegroundColor);
-    margin-bottom: 10px;
-    font-weight: $font-semibold;
-    text-decoration: none;
-  }
-
-  @media screen and (max-width: $mobile-view) {
-    max-height: initial;
-    overflow: initial;
-
-    .section-title {
-      font-size: 17px;
-      margin-left: 10px;
-    }
-  }
-}
-
 // Use margin by default, or padding if $margin is false
-@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
-  --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
+@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+  --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
 
   @if $margin {
-    margin-left: var(--fluidVideosMiniatureMargins) !important;
-    margin-right: var(--fluidVideosMiniatureMargins) !important;
+    margin-left: var(--gridVideosMiniatureMargins) !important;
+    margin-right: var(--gridVideosMiniatureMargins) !important;
   } @else {
-    padding-left: var(--fluidVideosMiniatureMargins) !important;
-    padding-right: var(--fluidVideosMiniatureMargins) !important;
+    padding-left: var(--gridVideosMiniatureMargins) !important;
+    padding-right: var(--gridVideosMiniatureMargins) !important;
   }
 
   @media screen and (max-width: $mobile-view) {
-    --fluidVideosMiniatureMargins: $min-margin;
+    --gridVideosMiniatureMargins: #{$min-margin};
 
     width: auto;
   }
 }
 
-@mixin fluid-videos-miniature-layout {
-  @include fluid-videos-miniature-margins;
-
-  @media screen and (max-width: $mobile-view) {
-    .videos {
-      text-align: center;
-
-      ::ng-deep .video-miniature {
-        padding-right: 0;
-        height: auto;
-        width: 100%;
-        margin-bottom: 25px;
-
-        .video-miniature-information {
-          width: 100% !important;
-          text-align: left;
-
-          span {
-            width: 100%;
-          }
-        }
-
-        .video-thumbnail {
-          border-radius: 0;
-        }
-      }
-    }
-  }
+@mixin grid-videos-miniature-layout {
+  @include grid-videos-miniature-margins;
 
   @media screen and (min-width: $mobile-view) {
-    .videos {
-      --miniatureMinWidth: #{$video-thumbnail-width - 15px};
+    .videos,
+    .playlists {
+      --miniatureMinWidth: #{$video-thumbnail-width - 25px};
       --miniatureMaxWidth: #{$video-thumbnail-width};
 
       display: grid;
-      column-gap: 5px;
+      column-gap: 30px;
       grid-template-columns: repeat(
         auto-fill,
         minmax(
@@ -240,21 +135,33 @@ $play-overlay-width: 18px;
         )
       );
 
-      @media screen and (min-width: #{breakpoint(fhd)}) {
-        column-gap: 1%;
-        --miniatureMinWidth: #{$video-thumbnail-width};
-      }
-
-      .video-wrapper {
+      .video-wrapper,
+      .playlist-wrapper {
         margin: 0 auto;
         width: 100%;
 
-        my-video-miniature {
+        my-video-miniature,
+        my-video-playlist-miniature {
           display: block;
           min-width: var(--miniatureMinWidth);
           max-width: var(--miniatureMaxWidth);
         }
       }
+
+      @media screen and (min-width: #{breakpoint(xm)}) {
+        column-gap: 15px;
+      }
+
+      @media screen and (min-width: #{breakpoint(fhd)}) {
+        column-gap: 2%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    .videos,
+    .playlists {
+      text-align: center;
     }
   }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index eac2f1a7f..e37b89c62 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -620,17 +620,23 @@
   @include button-with-icon(20px, 5px, -1px);
 }
 
-@mixin row-blocks {
+@mixin row-blocks ($column-responsive: true) {
   display: flex;
   min-height: 130px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #C6C6C6;
 
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-    height: auto;
-    align-items: center;
+  @media screen and (max-width: $small-view) {
+    @if $column-responsive {
+      flex-direction: column;
+      height: auto;
+      align-items: center;
+    } @else {
+      min-height: initial;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+    }
   }
 }
 
@@ -932,3 +938,31 @@
 
   border-left: $width solid rgba(255, 255, 255, 0.95);
 }
+
+@mixin on-small-main-col () {
+  :host-context(.main-col:not(.expanded)) {
+    @media screen and (max-width: $small-view + $menu-width) {
+      @content;
+    }
+  }
+
+  :host-context(.main-col.expanded) {
+    @media screen and (max-width: $small-view) {
+      @content;
+    }
+  }
+}
+
+@mixin on-mobile-main-col () {
+  :host-context(.main-col:not(.expanded)) {
+    @media screen and (max-width: $mobile-view + $menu-width) {
+      @content;
+    }
+  }
+
+  :host-context(.main-col.expanded) {
+    @media screen and (max-width: $mobile-view) {
+      @content;
+    }
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8c5e75864..4c9a79621 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -34,7 +34,7 @@ $green: #39CC0B;
 $grey-actor-name: #777272;
 
 $expanded-horizontal-margins: 150px;
-$not-expanded-horizontal-margins: 60px;
+$not-expanded-horizontal-margins: 30px;
 
 $button-height: 30px;
 
@@ -59,10 +59,13 @@ $footer-margin: 30px;
 
 $separator-border-color: rgba(0, 0, 0, 0.10);
 
-$video-miniature-width: 238px;
 $video-miniature-margin-bottom: 15px;
-$video-thumbnail-height: 122px;
-$video-thumbnail-width: 223px;
+$video-thumbnail-height: 153px;
+$video-thumbnail-width: 280px;
+$video-thumbnail-medium-height: 114px;
+$video-thumbnail-medium-width: 201px;
+$video-thumbnail-small-height: 71px;
+$video-thumbnail-small-width: 125px;
 
 $theater-bottom-space: 115px;
 
@@ -125,6 +128,7 @@ $variables: (
   --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
 
   --horizontalMarginContent: var(--horizontalMarginContent),
+  --videosHorizontalMarginContent: var(--videosHorizontalMarginContent),
   --mainColWidth: var(--mainColWidth)
 );