Fix playlist miniature size with big description

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 3cccbe0807cae01ecf708fcff40cd68afb5ad8e1..1dd68b09e3706aa7170eb4bc3dda989ce263c468 100644 (file)
--- 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 c350192f48f496af62b076b41c13ce0d03e43e6f..3956d9282228510f10a5ae94495f58634db540cc 100644 (file)
--- 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);
   }
 }