From 247bbe29145c66a1c4ff61ce5dab70fec51a29aa Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 29 Nov 2021 14:20:18 +0100
Subject: [PATCH] Fix playlist miniature size with big description

---
 .../video-playlist-miniature.component.html              | 4 ++--
 .../video-playlist-miniature.component.scss              | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

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 3cccbe080..1dd68b09e 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
@@ -27,11 +27,11 @@
     </a>
 
     <div class="privacy-date">
-      <span class="video-info-privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
+      <span class="privacy" *ngIf="displayPrivacy">{{ playlist.privacy.label }}</span>
 
       <span i18n class="updated-at">Updated {{ playlist.updatedAt | myFromNow }}</span>
     </div>
 
-    <div *ngIf="displayDescription" class="video-info-description" [innerHTML]="playlistDescription"></div>
+    <div *ngIf="displayDescription" class="description" [innerHTML]="playlistDescription"></div>
   </div>
 </div>
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 c350192f4..3956d9282 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
@@ -55,7 +55,7 @@
     margin-top: 5px;
     font-size: 13px;
 
-    .video-info-privacy {
+    .privacy {
       font-weight: $font-semibold;
 
       &::after {
@@ -65,7 +65,9 @@
     }
   }
 
-  .video-info-description {
+  .description {
+    @include peertube-word-wrap;
+
     margin-top: 10px;
     color: pvar(--greyForegroundColor);
   }
@@ -99,7 +101,8 @@
   .miniature-thumbnail {
     @include margin-right(10px);
 
-    width: var(--rowThumbnailWidth);
+    min-width: var(--rowThumbnailWidth);
+    max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
   }
 }