Add contained in playlists badges gap

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / video-miniature.component.scss

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 5df89d019deccd23854f411c1e49c3015b29a319..06ca4a672bd44230e289559d574ac4c8b225d533 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -1,9 +1,13 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $more-button-width: 40px;
 
+.video-miniature {
+  font-size: 14px;
+}
+
 .video-miniature-name {
   @include miniature-name;
 }
@@ -13,7 +17,7 @@ $more-button-width: 40px;
 }
 
 my-actor-avatar {
-  margin: 10px 10px 0 0;
+  @include margin(10px, 10px, 0, 0);
 }
 
 .video-miniature-created-at-views {
@@ -95,6 +99,7 @@ my-actor-avatar {
   .video-bottom {
     display: flex;
     width: 100%;
+    min-width: 1px;
   }
 
   .video-miniature-name {
@@ -145,6 +150,7 @@ my-actor-avatar {
 
   .video-bottom {
     display: flex;
+    min-width: 1px;
   }
 
   // We don't display avatar in row mode
@@ -153,14 +159,15 @@ my-actor-avatar {
   }
 
   my-video-thumbnail {
+    @include margin-right(10px);
+
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 
   .video-miniature-name {
-    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+    font-size: $video-miniature-row-name-font-size;
   }
 
   .video-miniature-created-at-views,
@@ -174,6 +181,14 @@ my-actor-avatar {
   }
 }
 
+.contained-in-playlists {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 5px;
+  row-gap: 5px;
+  font-size: 1rem;
+}
+
 @include on-small-main-col {
   .video-miniature.display-as-row {
     --rowThumbnailWidth: #{$video-thumbnail-medium-width};