From 92de18e49308970ebf0774c2379359f087f42308 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 27 Sep 2024 10:25:09 +0100
Subject: [PATCH] Restyle records list to work better on mobile

---
 lib/music_library_web/components/core_components.ex    |  6 +++---
 lib/music_library_web/live/record_live/index.html.heex | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 7107ee14..829683a5 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -473,8 +473,8 @@ defmodule MusicLibraryWeb.CoreComponents do
       end
 
     ~H"""
-    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
-      <table class="w-[40rem] mt-11 sm:w-full">
+    <div class="px-4 sm:px-0">
+      <table class="md:w-full mt-11">
         <thead class="text-sm text-left leading-6 text-zinc-500">
           <tr>
             <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
@@ -506,7 +506,7 @@ defmodule MusicLibraryWeb.CoreComponents do
                 <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
                 <span
                   :for={action <- @action}
-                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+                  class="relative ml-4 max-sm:ml-2 max-sm:text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                 >
                   <%= render_slot(action, @row_item.(row)) %>
                 </span>
diff --git a/lib/music_library_web/live/record_live/index.html.heex b/lib/music_library_web/live/record_live/index.html.heex
index e700a173..8c53511e 100644
--- a/lib/music_library_web/live/record_live/index.html.heex
+++ b/lib/music_library_web/live/record_live/index.html.heex
@@ -24,13 +24,13 @@
   row_click={fn {_id, record} -> JS.navigate(~p"/records/#{record}") end}
 >
   <:col :let={{_id, record}} label="Image">
-    <img class="max-w-16" src={~p"/images/#{record.id}"} alt={record.title} />
+    <img class="max-w-16 rounded-lg shadow" src={~p"/images/#{record.id}"} alt={record.title} />
   </:col>
-  <:col :let={{_id, record}} label="Artists">
-    <%= Enum.map(record.artists, fn a -> a.name end) %>
+  <:col :let={{_id, record}} label="Record">
+    <p class="text-sm max-sm:text-xs"><%= Enum.map(record.artists, fn a -> a.name end) %></p>
+    <p class="text-base font-semibold text-wrap max-sm:text-xs"><%= record.title %></p>
+    <p class="text-sm max-sm:text-xs"><%= record.year %></p>
   </:col>
-  <:col :let={{_id, record}} label="Title"><%= record.title %></:col>
-  <:col :let={{_id, record}} label="Year"><%= record.year %></:col>
   <:action :let={{_id, record}}>
     <.link href={musicbrainz_url(record)} target=".blank">MB</.link>
   </:action>