From f502cd25eb7305725d79498b910f7cc6cd6d704a Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 24 Mar 2025 15:04:29 +0100
Subject: [PATCH] fix(front): display multi artist credits in one line in
 player and in queue

---
 front/src/components/Queue.vue        | 48 ++++++++++++++-------------
 front/src/components/audio/Player.vue |  9 +++--
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 2426fd804..3d0b5b7f2 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -296,30 +296,32 @@ if (!isWebGLSupported) {
             </template>
           </h2>
           <span>
-            <template
-              v-for="ac in currentTrack.artistCredit"
-              :key="ac.artist.id"
-            >
-              <router-link
-                :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
-                @click.stop.prevent=""
+            <Layout flex gap-8>
+              <template
+                v-for="ac in currentTrack.artistCredit"
+                :key="ac.artist.id"
               >
-                <Pill>
-                  <template #image>
-                    <img
-                      v-if="ac.artist.cover"
-                      v-lazy="ac.artist.cover?.urls.small_square_crop"
-                    >
-                    <i
-                      v-else
-                      class="bi bi-person-circle"
-                    />
-                  </template>
-                  {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
-                </Pill>
-              </router-link>
-              <span>{{ ac.joinphrase }}</span>
-            </template>
+                <router-link
+                  :to="{name: 'library.artists.detail', params: {id: ac.artist.id }}"
+                  @click.stop.prevent=""
+                >
+                  <Pill>
+                    <template #image>
+                      <img
+                        v-if="ac.artist.cover"
+                        v-lazy="ac.artist.cover?.urls.small_square_crop"
+                      >
+                      <i
+                        v-else
+                        class="bi bi-person-circle"
+                      />
+                    </template>
+                    {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
+                  </Pill>
+                </router-link>
+                <span>{{ ac.joinphrase }}</span>
+              </template>
+            </Layout>
           </span>
           <div
             v-if="currentTrack && errored"
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index c46906fbe..3b0cdd42f 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -15,6 +15,7 @@ import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
 import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import PlayerControls from './PlayerControls.vue'
 import VolumeControl from './VolumeControl.vue'
+import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 
 const {
@@ -230,7 +231,11 @@ const hideArtist = () => {
             <strong>
               {{ currentTrack.title }}
             </strong>
-            <div class="meta">
+            <Layout
+              flex
+              no-gap
+              class="meta"
+            >
               <div
                 v-for="ac in currentTrack.artistCredit"
                 :key="ac.artist.id"
@@ -242,7 +247,7 @@ const hideArtist = () => {
                 <span class="middle slash symbol" />
                 {{ currentTrack.albumTitle ?? t('components.audio.Player.meta.unknownAlbum') }}
               </template>
-            </div>
+            </Layout>
           </div>
         </div>
         <div