Improve display of single album page

lib/music_library_web/components/core_components.ex

@@ -427,12 +427,12 @@ defmodule MusicLibraryWeb.CoreComponents do
 
   def header(assigns) do
     ~H"""
-    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+    <header class={[@actions != [] && "flex items-center justify-between gap-6 mb-2", @class]}>
       <div>
         <h1 class="text-lg font-semibold leading-8 text-zinc-800">
           <%= render_slot(@inner_block) %>
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+        <p :if={@subtitle != []} class="mt-2 text-base leading-6 text-zinc-600">
           <%= render_slot(@subtitle) %>
         </p>
       </div>

lib/music_library_web/live/record_live/show.html.heex

@@ -8,19 +8,20 @@
   </:actions>
 </.header>
 
-<.list>
-  <:item title="Type"><%= @record.type %></:item>
-  <:item title="Musicbrainz ID">
-    <a href={musicbrainz_url(@record)}>
-      <%= @record.musicbrainz_id %>
-    </a>
-  </:item>
-  <:item title="Year"><%= @record.year %></:item>
-  <:item title="Genres"><%= Enum.join(@record.genres, ", ") %></:item>
-  <:item title="Image">
-    <img class="max-w-32" src={~p"/images/#{@record.id}"} alt={@record.title} />
-  </:item>
-</.list>
+<div class="columns-2">
+  <img class="w-full" src={~p"/images/#{@record.id}"} alt={@record.title} />
+
+  <.list>
+    <:item title="Type"><%= @record.type %></:item>
+    <:item title="Musicbrainz ID">
+      <a href={musicbrainz_url(@record)}>
+        <%= @record.musicbrainz_id %>
+      </a>
+    </:item>
+    <:item title="Year"><%= @record.year %></:item>
+    <:item title="Genres"><%= Enum.join(@record.genres, ", ") %></:item>
+  </.list>
+</div>
 
 <.back navigate={~p"/records"}>Back to records</.back>