X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-video-playlist%2Fvideo-playlist-miniature.component.scss;h=2d8377e7ba2c6959b81dcc242b096dcfbfdc0a43;hb=HEAD;hp=c5be5f2928dcc634ffd5aeda15cd07070363a359;hpb=4024c44f9027a32809931de0692d40d001df721c;p=github%2FChocobozzz%2FPeerTube.git

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 c5be5f292..2d8377e7b 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
@@ -1,12 +1,12 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .miniature {
   display: inline-block;
   width: 100%;
 
-  &.no-videos:not(.to-manage){
+  &.no-videos:not(.to-manage) {
     a {
       cursor: default !important;
     }
@@ -42,9 +42,6 @@
 
   .miniature-name {
     @include miniature-name;
-    @include ellipsis-multiline(1.3em, 2);
-
-    margin: 0;
   }
 
   .by {
@@ -56,9 +53,9 @@
 
   .privacy-date {
     margin-top: 5px;
+    font-size: 14px;
 
-    .video-info-privacy {
-      font-size: 14px;
+    .privacy {
       font-weight: $font-semibold;
 
       &::after {
@@ -68,14 +65,24 @@
     }
   }
 
-  .video-info-description {
+  .description {
+    @include peertube-word-wrap;
+
     margin-top: 10px;
     color: pvar(--greyForegroundColor);
   }
 }
 
 .miniature:not(.display-as-row) {
+
+  .miniature-name {
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+
   .miniature-thumbnail {
+    @include block-ratio($selector: '::ng-deep a');
+
     margin-top: 10px;
     margin-bottom: 5px;
   }
@@ -87,10 +94,16 @@
 
   display: flex;
 
+  .miniature-name {
+    font-size: $video-miniature-row-name-font-size;
+  }
+
   .miniature-thumbnail {
-    width: var(--rowThumbnailWidth);
+    @include margin-right(10px);
+
+    min-width: var(--rowThumbnailWidth);
+    max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 }