When using button components as links, make sure link is the oute…

…r element to honor the click/touch area as a user would expect.
zorn · Dec 30, 2024 · aff1ad3 · aff1ad3
1 parent 9282e2d
commit aff1ad3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/lib/flick_web/components/layouts/app.html.heex b/lib/flick_web/components/layouts/app.html.heex
@@ -9,11 +9,11 @@
         >
           RankedVoting<span class="text-2xl">.app</span>
         </.link>
-        <.button class="shadow-none">
-          <.link navigate={~p"/ballot/new"}>
+        <.link navigate={~p"/ballot/new"}>
+          <.button class="shadow-none">
             Create Ballot
-          </.link>
-        </.button>
+          </.button>
+        </.link>
       </div>
     </div>
   </FlickWeb.UI.page_column>

diff --git a/lib/flick_web/live/ballots/viewer_live.ex b/lib/flick_web/live/ballots/viewer_live.ex
@@ -129,14 +129,15 @@ defmodule FlickWeb.Ballots.ViewerLive do
           <dt class="font-bold">URL Slug</dt>
           <dd id="ballot-url-slug" class="pb-4">{@ballot.url_slug}</dd>
         </dl>
-        <.button :if={RankedVoting.can_update_ballot?(@ballot)} id="edit-ballot-button">
-          <.link
-            navigate={~p"/ballot/#{@ballot.url_slug}/#{@ballot.secret}/edit"}
-            class="text-white no-underline"
-          >
+        <.link
+          :if={RankedVoting.can_update_ballot?(@ballot)}
+          navigate={~p"/ballot/#{@ballot.url_slug}/#{@ballot.secret}/edit"}
+          class="text-white no-underline"
+        >
+          <.button id="edit-ballot-button">
             Edit Ballot
-          </.link>
-        </.button>
+          </.button>
+        </.link>
       </div>
 
       <div class="my-6">