Reformat artist show page

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

@@ -36,7 +36,8 @@
     </.async_result>
   </header>
 
-  <div class="columns-2 mt-4">
+  <div class="mt-4 md:grid md:grid-cols-5 md:gap-2">
+    <div class="col-span-1 mt-4">
       <.async_result :let={artist_info} assign={@artist_info}>
         <:loading>
           <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
@@ -59,7 +60,7 @@
           class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
         >
           <summary class="text-sm mb-4">{gettext("Biography")}</summary>
-        {render_bio(@artist_info.result.bio)}
+          {render_bio(@artist_info.result.summary)}
         </details>
       </.async_result>
 
@@ -85,17 +86,20 @@
           class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
         >
           <summary class="text-sm mb-4">{gettext("Similar artists")}</summary>
+          <ul>
+            <li :for={artist <- similar_artists}>
               <.link
-          :for={artist <- similar_artists}
                 class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
                 patch={~p"/artists/#{artist.musicbrainz_id}"}
               >
                 {artist.name}
               </.link>
+            </li>
+          </ul>
         </details>
       </.async_result>
     </div>
-
+    <div class="col-span-4">
       <.record_grid
         :if={@collection_records_count > 0}
         title={gettext("Collection")}
@@ -113,4 +117,6 @@
         records_count={@wishlist_records_count}
         record_path={fn record -> ~p"/wishlist/#{record}" end}
       />
+    </div>
+  </div>
 </div>

priv/gettext/default.pot

@@ -30,7 +30,7 @@ msgid "Choose a value"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
-#: lib/music_library_web/live/artist_live/show.html.heex:101
+#: lib/music_library_web/live/artist_live/show.html.heex:105
 #: lib/music_library_web/live/collection_live/index.ex:157
 #: lib/music_library_web/live/collection_live/show.ex:117
 #: lib/music_library_web/live/collection_live/show.ex:134
@@ -302,7 +302,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:20
-#: lib/music_library_web/live/artist_live/show.html.heex:110
+#: lib/music_library_web/live/artist_live/show.html.heex:114
 #: lib/music_library_web/live/wishlist_live/index.ex:159
 #: lib/music_library_web/live/wishlist_live/show.ex:137
 #, elixir-autogen, elixir-format
@@ -436,12 +436,12 @@ msgstr ""
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:61
+#: lib/music_library_web/live/artist_live/show.html.heex:62
 #, elixir-autogen, elixir-format
 msgid "Biography"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:43
+#: lib/music_library_web/live/artist_live/show.html.heex:44
 #, elixir-autogen, elixir-format
 msgid "Loading biography"
 msgstr ""
@@ -486,7 +486,7 @@ msgstr ""
 msgid "Records"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:54
+#: lib/music_library_web/live/artist_live/show.html.heex:55
 #, elixir-autogen, elixir-format
 msgid "Error loading biography"
 msgstr ""
@@ -672,17 +672,17 @@ msgstr ""
 msgid "New"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:80
+#: lib/music_library_web/live/artist_live/show.html.heex:81
 #, elixir-autogen, elixir-format
 msgid "Error loading similar artists"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:69
+#: lib/music_library_web/live/artist_live/show.html.heex:70
 #, elixir-autogen, elixir-format
 msgid "Loading similar artists"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:87
+#: lib/music_library_web/live/artist_live/show.html.heex:88
 #, elixir-autogen, elixir-format
 msgid "Similar artists"
 msgstr ""