Fix Tailwind layout and spacing issues

This commit is contained in:
Claudio Ortolina
2026-03-27 16:11:05 +00:00
parent 96836ae715
commit 88542cc537
5 changed files with 13 additions and 13 deletions
@@ -34,7 +34,7 @@ defmodule MusicLibraryWeb.Components.Pagination do
{gettext("Next")} {gettext("Next")}
</.button> </.button>
</div> </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> <div>
<.button_group> <.button_group>
<.prev_link <.prev_link
@@ -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="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 justify-between text-xs text-zinc-500 dark:text-zinc-400">
<div class="flex items-center space-x-4"> <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="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> <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
<span class="ml-1">{gettext("Navigate")}</span> <span>{gettext("Navigate")}</span>
</div> </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> <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>
<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> <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> </div>
<div :if={@total_results > 0} class="text-zinc-500 dark:text-zinc-400"> <div :if={@total_results > 0} class="text-zinc-500 dark:text-zinc-400">
@@ -280,7 +280,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
> >
<div class="mb-3 flex items-baseline justify-between"> <div class="mb-3 flex items-baseline justify-between">
<div class="grow"> <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"> <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<.link navigate={~p"/record-sets/#{@record_set}"} class="hover:underline"> <.link navigate={~p"/record-sets/#{@record_set}"} class="hover:underline">
{@record_set.name} {@record_set.name}
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
)} )}
</.alert> </.alert>
<div class="mt-2 mb-4"> <div class="my-4">
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}> <.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" /> <.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Back to search")} {gettext("Back to search")}
@@ -27,11 +27,11 @@ defmodule MusicLibraryWeb.StatsLive.Index do
wishlist_count={@wishlist_count} wishlist_count={@wishlist_count}
scrobble_count={@scrobble_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} /> <.formats_stats collection_count_by_format={@collection_count_by_format} />
<.types_stats collection_count_by_type={@collection_count_by_type} /> <.types_stats collection_count_by_type={@collection_count_by_type} />
</div> </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} /> <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} /> <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} /> <.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} 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_artists records_by_artist={@records_by_artist} />
<.top_collection_genres records_by_genre={@records_by_genre} /> <.top_collection_genres records_by_genre={@records_by_genre} />
<.top_release_years records_by_release_year={@records_by_release_year} /> <.top_release_years records_by_release_year={@records_by_release_year} />