Add contained in playlists badges gap

2 files changed, 9 insertions, 1 deletions

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};