Render artist bio in a left-side sheet

lib/music_library_web/live/artist_live/show.ex

@@ -240,4 +240,14 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
         )
     end
   end
+
+  defp remove_read_more_link(summary) do
+    last_fm_link_regex = ~r/<a.*Read more on Last\.fm<\/a>\.*\s*/
+    reformatted_summary = String.replace(summary, last_fm_link_regex, "")
+
+    PhoenixHTMLHelpers.Format.text_to_html(reformatted_summary,
+      escape: false,
+      attributes: [class: "mt-2 text-sm/7"]
+    )
+  end
 end

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

@@ -146,17 +146,27 @@
             {gettext("Error loading biography")}
           </div>
         </:failed>
-        <details
-          :if={lastfm_artist_info.summary !== ""}
-          class="mt-2 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
-        >
-          <summary class="text-sm mt-4 font-medium leading-6 text-zinc-900 dark:text-zinc-400">
-            {gettext("Biography")}
-          </summary>
-          <div class="ml-2">
-            {render_bio(lastfm_artist_info.summary)}
-          </div>
-        </details>
+        <dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
+          {gettext("Biography")}
+        </dt>
+        <dd>
+          {remove_read_more_link(lastfm_artist_info.summary)}
+          <.link
+            class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
+            phx-click={Fluxon.open_dialog("bio")}
+          >
+            <.icon
+              name="hero-arrow-right-end-on-rectangle"
+              class="-mt-1 mr-1 h-5 w-5"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Read more")}
+          </.link>
+        </dd>
+        <.sheet id="bio" class="max-w-2xl" placement="left">
+          {render_bio(lastfm_artist_info.bio)}
+        </.sheet>
       </.async_result>
 
       <.async_result :let={similar_artists} assign={@similar_artists}>