From 547195e4554e1431bc888acc87e4cdde3d5e809a Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 30 Sep 2024 09:40:26 +0100
Subject: [PATCH] Improve show record interface

Use a single column layout on mobile, with centered buttons.
---
 .../components/core_components.ex               |  7 +++++--
 .../live/record_live/show.html.heex             | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 829683a5..cbb1efb5 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -427,7 +427,10 @@ defmodule MusicLibraryWeb.CoreComponents do
 
   def header(assigns) do
     ~H"""
-    <header class={[@actions != [] && "flex items-center justify-between gap-6 mb-2", @class]}>
+    <header class={[
+      @actions != [] && "sm:flex sm:items-center sm:justify-between sm:gap-6 mb-2",
+      @class
+    ]}>
       <div>
         <h1 class="text-lg font-semibold leading-8 text-zinc-800">
           <%= render_slot(@inner_block) %>
@@ -436,7 +439,7 @@ defmodule MusicLibraryWeb.CoreComponents do
           <%= render_slot(@subtitle) %>
         </p>
       </div>
-      <div class="flex-none"><%= render_slot(@actions) %></div>
+      <div class="flex justify-center gap-2 sm:flex-none mt-2 mb-2"><%= render_slot(@actions) %></div>
     </header>
     """
   end
diff --git a/lib/music_library_web/live/record_live/show.html.heex b/lib/music_library_web/live/record_live/show.html.heex
index 64704c0d..35b51e7a 100644
--- a/lib/music_library_web/live/record_live/show.html.heex
+++ b/lib/music_library_web/live/record_live/show.html.heex
@@ -11,9 +11,9 @@
   </:actions>
 </.header>
 
-<div class="columns-2">
-  <span class="relative inline-block">
-    <img class="w-full shadow" src={~p"/images/#{@record.id}"} alt={@record.title} />
+<div class="md:columns-2">
+  <span class="relative block md:inline-block drop-shadow">
+    <img class="w-full" src={~p"/images/#{@record.id}"} alt={@record.title} />
     <span class="absolute right-2 bottom-1 block text-white drop-shadow-md">
       <%= Records.Record.format_short_label(@record.format) %>
     </span>
@@ -23,11 +23,18 @@
     <:item title="Type"><%= @record.type %></:item>
     <:item title="Musicbrainz ID">
       <a href={musicbrainz_url(@record)}>
-        <%= @record.musicbrainz_id %>
+        <code><%= @record.musicbrainz_id %></code>
       </a>
     </:item>
     <:item title="Year"><%= @record.year %></:item>
-    <:item title="Genres"><%= Enum.join(@record.genres, ", ") %></:item>
+    <:item title="Genres">
+      <span
+        :for={genre <- @record.genres}
+        class="inline-flex items-center mr-2 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      >
+        <%= genre %>
+      </span>
+    </:item>
   </.list>
 </div>