From d03170948af5205952ea592cfcfde2881fe780a0 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 11 Jun 2025 21:03:42 +0300
Subject: [PATCH] Improve display of artist/title in detail page

More prominent size for title, more spacing before data
---
 lib/music_library_web/live/collection_live/show.html.heex | 4 ++--
 lib/music_library_web/live/wishlist_live/show.html.heex   | 4 ++--
 2 files changed, 4 insertions(+), 4 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 5f18b4f2..d1512035 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/lib/music_library_web/live/collection_live/show.html.heex
@@ -13,7 +13,7 @@
         <h1 class="text-base font-medium leading-6 text-zinc-700">
           <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
         </h1>
-        <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+        <h2 class="mt-1 flex font-semibold text-lg md:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           {@record.title}
         </h2>
         <p class="mt-2 flex items-center text-sm leading-5 text-zinc-500 dark:text-zinc-400">
@@ -142,7 +142,7 @@
         </:links>
       </.actions_menu>
     </div>
-    <div class="mt-4">
+    <div class="mt-4 md:mt-8">
       <%!-- TODO: replace with OSS version --%>
       <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
         <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex
index 97fd9a50..ef1a0d87 100644
--- a/lib/music_library_web/live/wishlist_live/show.html.heex
+++ b/lib/music_library_web/live/wishlist_live/show.html.heex
@@ -13,7 +13,7 @@
         <h1 class="text-base font-medium leading-6 text-zinc-700">
           <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
         </h1>
-        <h2 class="mt-1 flex font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+        <h2 class="mt-1 flex font-semibold text-lg md:text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
           {@record.title}
         </h2>
         <p class="flex items-center mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
@@ -163,7 +163,7 @@
       </.actions_menu>
     </div>
 
-    <div class="mt-4">
+    <div class="mt-4 md:mt-8">
       <%!-- TODO: replace with OSS version --%>
       <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
         <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">