From dc5febfae43615b8346c21a635eacebed90c5d7e Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 5 May 2025 11:05:51 +0100
Subject: [PATCH] Format tracks and artists

---
 .../live/collection_live/show.html.heex          | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex
index 12205b36..71c4fefe 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/lib/music_library_web/live/collection_live/show.html.heex
@@ -308,21 +308,17 @@
         <ul class="w-full table table-auto">
           <li
             :for={track <- medium.tracks}
-            class="contents text-sm leading-5 text-zinc-700 dark:text-zinc-300 list-none"
+            class="contents leading-5 text-zinc-700 dark:text-zinc-300 list-none"
           >
             <div class="table-row">
-              <span class="table-cell text-right pr-1">{track.position}</span>
-              <span class="table-cell">{track.title}</span>
-              <span class="table-cell text-right pl-1">{track.length}</span>
+              <span class="table-cell text-xs text-right pr-1">{track.position}</span>
+              <span class="table-cell text-sm font-medium leading-6">{track.title}</span>
+              <span class="table-cell text-xs text-right pl-1">{track.length}</span>
             </div>
-            <div
-              :for={artist <- track.artists}
-              :if={release_with_tracks.artists !== track.artists}
-              class="table-row text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
-            >
+            <div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
               <span class="table-cell" />
               <span class="table-cell">
-                {artist.name}
+                {Enum.map_join(track.artists, ", ", fn artist -> artist.name end)}
               </span>
             </div>
           </li>