Add contained in playlists badges gap

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 42d13f458fa186f9ba3e89414591af1cccbc8ecb..3f01806955884db0b68c88c59cd4b0693bd6cf4e 100644 (file)
--- 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 d48b005185409e585dd5fb7e219625065c7634cd..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
@@ -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};