4 files changed, 69 insertions, 58 deletions

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;
+  }
 }