From e666b247e1e352605e8ed6f88993bf49647238cd Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 23 Sep 2024 14:09:21 +0100
Subject: [PATCH] Improve display of single album page

---
 .../components/core_components.ex             |  4 +--
 .../live/record_live/show.html.heex           | 27 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 74a7272a..bc9d1279 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/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>
diff --git a/lib/music_library_web/live/record_live/show.html.heex b/lib/music_library_web/live/record_live/show.html.heex
index 5acf94aa..227ffcb9 100644
--- a/lib/music_library_web/live/record_live/show.html.heex
+++ b/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>