From 31b610068779321c6c8240df054758f4025caeb8 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 10 Dec 2024 18:48:49 +0300
Subject: [PATCH] Shrink buttons on mobile

---
 lib/music_library_web/components/core_components.ex       | 4 ++--
 lib/music_library_web/live/collection_live/show.html.heex | 2 +-
 lib/music_library_web/live/wishlist_live/show.html.heex   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 34971f90..fe3ab760 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -236,8 +236,8 @@ defmodule MusicLibraryWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-md py-2 px-3 mt-2",
-        "text-sm font-semibold leading-6 ",
+        "phx-submit-loading:opacity-75 rounded-md py-1 sm:py-2 px-2 sm:px-3 mt-2",
+        "text-xs sm:text-sm font-semibold leading-6 ",
         "bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
         "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
         "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex
index f7203138..deb18a0b 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/lib/music_library_web/live/collection_live/show.html.heex
@@ -26,7 +26,7 @@
       )} · {Records.Record.type_long_label(@record.type)}
     </p>
     <!-- TODO: extract to a component -->
-    <nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
+    <nav class="mt-3 sm:mt-5 isolate inline-flex rounded-md shadow-sm">
       <.link patch={~p"/collection/#{@record}/show/edit"} phx-click={JS.push_focus()}>
         <.button type="button" class="relative inline-flex items-center rounded-r-none">
           {gettext("Edit")}
diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex
index e8a86ee3..6cdb57f5 100644
--- a/lib/music_library_web/live/wishlist_live/show.html.heex
+++ b/lib/music_library_web/live/wishlist_live/show.html.heex
@@ -26,7 +26,7 @@
       )} · {Records.Record.type_long_label(@record.type)}
     </p>
     <!-- TODO: extract to a component -->
-    <nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
+    <nav class="mt-3 sm:mt-5 isolate inline-flex rounded-md shadow-sm">
       <.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
         <.button type="button" class="relative inline-flex items-center rounded-r-none">
           {gettext("Edit")}