From b14e3c3de92b879d54610d28100ab0a35b11edf5 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 24 May 2023 17:25:09 +0200
Subject: [PATCH] Add contained in playlists badges gap

---
 .../shared-video-miniature/video-miniature.component.html | 2 +-
 .../shared-video-miniature/video-miniature.component.scss | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 42d13f458..3f0180695 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -51,7 +51,7 @@
             <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
           </div>
 
-          <div *ngIf="containedInPlaylists" class="fs-6">
+          <div *ngIf="containedInPlaylists" class="contained-in-playlists">
             <a *ngFor="let playlist of containedInPlaylists" class="pt-badge badge-secondary" [routerLink]="['/w/p/', playlist.playlistShortUUID]">
               {{ playlist.playlistDisplayName }}
             </a>
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 d48b00518..06ca4a672 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -181,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};