From aff1ad3618fb0a6b33b41992c355d0e599cca29c Mon Sep 17 00:00:00 2001
From: Mike Zornek <zorn@zornlabs.com>
Date: Mon, 30 Dec 2024 14:50:39 -0500
Subject: [PATCH] When using `button` components as links, make sure `link` is
 the outer element to honor the click/touch area as a user would expect.

---
 lib/flick_web/components/layouts/app.html.heex |  8 ++++----
 lib/flick_web/live/ballots/viewer_live.ex      | 15 ++++++++-------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/lib/flick_web/components/layouts/app.html.heex b/lib/flick_web/components/layouts/app.html.heex
index 597571c..6c93655 100644
--- 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
index 59c71ba..db5715f 100644
--- 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">