Improve formatting of bio read more link and license block

Prefer inline Tailwind classes for consistency with rest of the codebase

assets/css/app.css

@@ -3,15 +3,3 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
-
-/* The bio html comes directly from the Last.fm api,
-* so there's no way to inject Tailwind classes in the <a> elements.
-* To work around that, we set a class to the bio container snd style its children.
-*/
-.bio a {
-  @apply font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200;
-}
-
-.bio .license {
-  @apply italic block;
-}

lib/music_library_web/live/artist_live/show.ex

@@ -62,8 +62,8 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
           Enum.join(
             [
               text,
-              link,
-              ~s(<span class="license">#{license}</span>)
+              ~s(<p class="mt-4 font-semibold text-zinc-700 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200">#{link}</p>),
+              ~s(<p class="mt-4 italic block">#{license}</p>)
             ],
             ""
           )

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

@@ -19,7 +19,7 @@
   </h1>
   <details
     :if={artist_info = @artist_info.ok? && @artist_info.result}
-    class="bio mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+    class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
   >
     <summary class="text-sm mb-4">{gettext("Biography")}</summary>
     {render_bio(artist_info.bio)}