Update the style for Server and User Show LiveViews.

lib/decentralised_book_index_web/live/dbi_server_live/show.ex

@@ -16,13 +16,17 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Show do
       </:actions>
     </.header>
 
-    <.list>
-      <:item title="Id">{@dbi_server.id}</:item>
 
-      <:item title="Name">{@dbi_server.name}</:item>
+    <div>
-
+      <dl>
-      <:item title="Url">{@dbi_server.url}</:item>
+        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Url</dt>
-    </.list>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@dbi_server.url}</dd>
+      </dl>
+      <dl>
+        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Sync on?</dt>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@dbi_server.sync_on?}</dd>
+      </dl>
+    </div>
 
     <.back navigate={~p"/servers"}>Back to servers</.back>
     """
@@ -40,7 +44,7 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Show do
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(
        :dbi_server,
-       Ash.get!(DecentralisedBookIndex.Metadata.DBIServer, id, actor: socket.assigns.current_user)
+       Ash.get!(DecentralisedBookIndex.Metadata.DBIServer, id, load: [:dbi_server], actor: socket.assigns.current_user)
      )}
   end
 

lib/decentralised_book_index_web/live/user_live/show.ex

@@ -16,10 +16,16 @@ defmodule DecentralisedBookIndexWeb.UserLive.Show do
       </:actions>
     </.header>
 
-    <.list>
+    <div>
-      <:item title="Email">{@user.email}</:item>
+      <dl>
-      <:item title="Role">{@user.role}</:item>
+        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Email</dt>
-    </.list>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@user.email}</dd>
+      </dl>
+      <dl>
+        <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Role</dt>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@user.role}</dd>
+      </dl>
+    </div>
 
     <.back navigate={~p"/users"}>Back to users</.back>
     """