From 18937865bf05ad1794932b333cc0a4a2736980c2 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 15 Oct 2024 15:19:40 +0100
Subject: [PATCH] Improve record details styling

---
 .../components/core_components.ex              | 10 +++++-----
 .../live/record_live/show.html.heex            | 18 +++++++++++-------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 0ca996f2..6825d87d 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -431,15 +431,15 @@ defmodule MusicLibraryWeb.CoreComponents do
       @actions != [] && "sm:flex sm:items-center sm:justify-between sm:gap-6 mb-2",
       @class
     ]}>
-      <div>
-        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+      <div class="font-semibold">
+        <h1 class="text-sm md:text-base lg:text-2xl text-gray-900">
           <%= render_slot(@inner_block) %>
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-base leading-6 text-zinc-600">
+        <h2 :if={@subtitle != []} class="mt-2 text-sm md:text-base text-gray-600">
           <%= render_slot(@subtitle) %>
-        </p>
+        </h2>
       </div>
-      <div class="flex justify-center gap-2 sm:flex-none mt-2 mb-2"><%= render_slot(@actions) %></div>
+      <div class="flex justify-center gap-2 sm:flex-none mt-4 mb-4"><%= render_slot(@actions) %></div>
     </header>
     """
   end
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 cbe17c40..3f214419 100644
--- a/lib/music_library_web/live/record_live/show.html.heex
+++ b/lib/music_library_web/live/record_live/show.html.heex
@@ -1,6 +1,8 @@
 <.header>
-  <%= @record.title %>
-  <:subtitle><%= format_artist_names(@record.artists) %></:subtitle>
+  <%= format_artist_names(@record.artists) %>
+  <:subtitle>
+    <%= @record.title %>
+  </:subtitle>
   <:actions>
     <.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
       <.button>Edit Metadata</.button>
@@ -11,17 +13,17 @@
   </:actions>
 </.header>
 
-<div class="md:columns-2">
-  <span class="relative block md:inline-block drop-shadow">
+<div class="md:columns-2 mt-4">
+  <div class="relative block md:inline-block drop-shadow">
     <img
-      class="w-full"
+      class="w-full rounded-lg shadow"
       src={~p"/covers/#{@record.id}?vsn=#{@record.cover_hash || ""}"}
       alt={@record.title}
     />
     <span class="absolute right-2 bottom-1 block text-white drop-shadow-md">
       <%= Records.Record.format_short_label(@record.format) %>
     </span>
-  </span>
+  </div>
 
   <.list>
     <:item title="Type">
@@ -50,7 +52,9 @@
   </.list>
 </div>
 
-<.back navigate={@back_url}>Back to records</.back>
+<div class="mt-8">
+  <.back navigate={@back_url}>Back to records</.back>
+</div>
 
 <.modal
   :if={@live_action == :edit}