Shrink buttons on mobile

This commit is contained in:
Claudio Ortolina
2024-12-10 18:48:49 +03:00
parent 44a8650c6c
commit 31b6100687
3 changed files with 4 additions and 4 deletions
@@ -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",
@@ -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")}
@@ -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")}