From fc336abdc2a15173527cd89f4202133f7ded080e Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 9 Apr 2025 15:39:09 +0100
Subject: [PATCH] Improve artist page layout

Move meta info at the bottom on mobile, use full-width
---
 lib/music_library_web/live/artist_live/show.html.heex | 11 +++++++----
 priv/gettext/default.pot                              |  5 +++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 2f1af4d6..55df7f55 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -58,8 +58,11 @@
     </div>
   </header>
 
-  <div class="mt-4 md:grid md:grid-cols-5 md:gap-2">
-    <div class="col-span-1 mt-4">
+  <div class="mt-4 grid md:grid-cols-5 md:gap-2">
+    <div class="col-span-5 md:col-span-1 mt-4 order-2 md:order-1">
+      <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+        {gettext("Meta")}
+      </h2>
       <.async_result :let={artist_info} assign={@artist_info}>
         <:loading>
           <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
@@ -81,7 +84,7 @@
           :if={artist_info.bio !== ""}
           class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
         >
-          <summary class="text-sm mb-4">{gettext("Biography")}</summary>
+          <summary class="text-sm mt-4 mb-4">{gettext("Biography")}</summary>
           {render_bio(@artist_info.result.summary)}
         </details>
       </.async_result>
@@ -121,7 +124,7 @@
         </details>
       </.async_result>
     </div>
-    <div class="col-span-4">
+    <div class="col-span-4 md:order-1">
       <.record_grid
         :if={@collection_records_count > 0}
         title={gettext("Collection")}
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 31b096cb..e2ea6c5e 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -727,3 +727,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "No scrobbles"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex
+#, elixir-autogen, elixir-format
+msgid "Meta"
+msgstr ""