Start formatting tracks

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>