From 88542cc53720f19d1f42defec25f5003d8a1c555 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 27 Mar 2026 16:11:05 +0000
Subject: [PATCH] Fix Tailwind layout and spacing issues

---
 lib/music_library_web/components/pagination.ex     |  2 +-
 .../components/search_components.ex                | 14 +++++++-------
 .../live/record_set_live/index.ex                  |  2 +-
 lib/music_library_web/live/scrobble_live/show.ex   |  2 +-
 lib/music_library_web/live/stats_live/index.ex     |  6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/lib/music_library_web/components/pagination.ex b/lib/music_library_web/components/pagination.ex
index 929e9c85..4c007f46 100644
--- a/lib/music_library_web/components/pagination.ex
+++ b/lib/music_library_web/components/pagination.ex
@@ -34,7 +34,7 @@ defmodule MusicLibraryWeb.Components.Pagination do
           {gettext("Next")}
         </.button>
       </div>
-      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-center sm:justify-items-center">
+      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-center">
         <div>
           <.button_group>
             <.prev_link
diff --git a/lib/music_library_web/components/search_components.ex b/lib/music_library_web/components/search_components.ex
index 727ee766..1b3da113 100644
--- a/lib/music_library_web/components/search_components.ex
+++ b/lib/music_library_web/components/search_components.ex
@@ -279,18 +279,18 @@ defmodule MusicLibraryWeb.SearchComponents do
     <div class="rounded-b-lg border-t border-zinc-200 bg-zinc-50 p-2 dark:border-zinc-700 dark:bg-zinc-900">
       <div class="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
         <div class="flex items-center space-x-4">
-          <div :if={@total_results > 0} class="flex items-center">
+          <div :if={@total_results > 0} class="flex items-center gap-1">
             <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↑</kbd>
-            <kbd class="ml-1 rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
-            <span class="ml-1">{gettext("Navigate")}</span>
+            <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
+            <span>{gettext("Navigate")}</span>
           </div>
-          <div :if={@total_results > 0} class="flex items-center">
+          <div :if={@total_results > 0} class="flex items-center gap-1">
             <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">Enter</kbd>
-            <span class="ml-1">{gettext("Select")}</span>
+            <span>{gettext("Select")}</span>
           </div>
-          <div class="flex items-center">
+          <div class="flex items-center gap-1">
             <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">Esc</kbd>
-            <span class="ml-1">{gettext("Close")}</span>
+            <span>{gettext("Close")}</span>
           </div>
         </div>
         <div :if={@total_results > 0} class="text-zinc-500 dark:text-zinc-400">
diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex
index 485cfd25..97c29ab4 100644
--- a/lib/music_library_web/live/record_set_live/index.ex
+++ b/lib/music_library_web/live/record_set_live/index.ex
@@ -280,7 +280,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
     >
       <div class="mb-3 flex items-baseline justify-between">
         <div class="grow">
-          <header class="items-baseline justify-start sm:flex">
+          <header class="sm:flex sm:items-baseline sm:justify-start">
             <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
               <.link navigate={~p"/record-sets/#{@record_set}"} class="hover:underline">
                 {@record_set.name}
diff --git a/lib/music_library_web/live/scrobble_live/show.ex b/lib/music_library_web/live/scrobble_live/show.ex
index 6cd11c4e..e24e8328 100644
--- a/lib/music_library_web/live/scrobble_live/show.ex
+++ b/lib/music_library_web/live/scrobble_live/show.ex
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
           )}
         </.alert>
 
-        <div class="mt-2 mb-4">
+        <div class="my-4">
           <.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
             <.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
             {gettext("Back to search")}
diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 93bd64b2..bdab3621 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -27,11 +27,11 @@ defmodule MusicLibraryWeb.StatsLive.Index do
         wishlist_count={@wishlist_count}
         scrobble_count={@scrobble_count}
       />
-      <div class="grid gap-x-5 lg:grid-cols-2">
+      <div class="grid gap-x-5 md:grid-cols-2">
         <.formats_stats collection_count_by_format={@collection_count_by_format} />
         <.types_stats collection_count_by_type={@collection_count_by_type} />
       </div>
-      <div class="grid grid-cols-1 gap-x-5 lg:grid-cols-3">
+      <div class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3">
         <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
         <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
         <.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
         streams={@streams}
       />
 
-      <div class="grid grid-cols-1 gap-x-5 lg:grid-cols-3">
+      <div class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3">
         <.top_collection_artists records_by_artist={@records_by_artist} />
         <.top_collection_genres records_by_genre={@records_by_genre} />
         <.top_release_years records_by_release_year={@records_by_release_year} />