Update the Author Show LiveView to show only the description.

lib/decentralised_book_index_web/live/author_live/show.ex

@@ -25,26 +25,43 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
       </:actions>
     </.header>
 
-    <div class="flex flex-wrap flex-[2_1_auto] gap-5">
+    <div class="flex flex-col items-start gap-6 max-w-6xl mx-auto p-4 bg-gray-900 rounded-lg transition-all duration-300 md:prose md:block">
       <%= if @author.avatar_url != nil do %>
-        <img class="w-36 h-36 mb-3 rounded-full shadow-lg mt-14 mx-auto md:mx-0" src={@author.avatar_url} alt={"#{@author.name} image"}/>
+        <img
+          class="w-36 h-36 mb-3 rounded-full shadow-lg mx-auto md:float-left md:mr-4"
+          src={@author.avatar_url}
+          alt={"#{@author.name} image"}
+        />
       <% else %>
-        <div class="relative w-36 h-36 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600 mt-14 mx-auto md:mx-0">
-          <svg class="absolute w-36 h-36 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
+        <div class="relative w-36 h-36 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600 mx-auto md:float-left md:mr-4">
+          <svg
+            class="absolute w-36 h-36 text-gray-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+              clip-rule="evenodd"
+            >
+            </path>
+          </svg>
         </div>
       <% end %>
 
-      <.list class="mt-5">
-        <:item title="Id">{@author.id}</:item>
-
-        <:item title="Name">{@author.name}</:item>
-
-        <:item title="Description">{@author.description}</:item>
-      </.list>
+      <div class="flex-1 pt-2 lg:pt-0">
+        <h2 class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Description</h2>
+        <p class="text-gray-300 leading-relaxed">
+          {@author.description}
+        </p>
+      </div>
     </div>
 
     <%= if @alternative_names != [] do %>
-      <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white mt-10">Alternatives names</h2>
+      <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white mt-10">
+        Alternatives names
+      </h2>
       <ul class="max-w-md space-y-1 text-gray-700 list-disc list-inside dark:text-white">
         <%= for alias_author <- @alternative_names do %>
           <.link navigate={~p"/authors/#{alias_author.id}"}>