From 144b2f379b4ed4275f86884cb37fb0970540cba8 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 5 May 2025 10:07:04 +0100
Subject: [PATCH] Start formatting tracks

---
 .../live/collection_live/show.html.heex       | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 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 15c91b53..f509e763 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/lib/music_library_web/live/collection_live/show.html.heex
@@ -305,20 +305,26 @@
         >
           {medium.number}
         </h4>
-        <ul class="list-disc pl-6">
+        <ul class="w-full table table-auto">
           <li
             :for={track <- medium.tracks}
-            class="text-sm leading-5 text-zinc-700 dark:text-zinc-300"
+            class="contents text-sm leading-5 text-zinc-700 dark:text-zinc-300 list-none"
           >
-            <span>{track.position}</span>
-            <span
+            <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>
+            </div>
+            <div
               :for={artist <- track.artists}
               :if={release_with_tracks.artists !== track.artists}
-              class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
+              class="table-row text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
             >
-              {artist.name}
-            </span>
-            <span>{track.title}</span>
+              <span class="table-cell" />
+              <span class="table-cell">
+                {artist.name}
+              </span>
+            </div>
           </li>
         </ul>
       </div>