From 911d114eb598d791965a16e6483080c221d6360f Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Mon, 2 Mar 2026 15:46:34 +0100
Subject: [PATCH] Add tap target button utility

---
 app/assets/stylesheets/buttons.css           | 22 ++++++++++++++++++++
 app/views/cards/display/perma/_tags.html.erb |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 119007639..4870f7f58 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -272,4 +272,26 @@
       inline-size: 100%;
     }
   }
+
+  /* Button utilities
+  /* ------------------------------------------------------------------------ */
+
+  :is([data-platform~=mobile], [data-platform~=native]) {
+    .btn--ensure-tap-target-size {
+      --tap-target-z-index: 1;
+      --tap-target-min-size: 44px;
+
+      z-index: var(--tap-target-z-index);
+
+      &::before {
+        content: "";
+        display: block;
+        block-size: var(--tap-target-min-size);
+        inline-size: var(--tap-target-min-size);
+        inset: calc(50% - var(--tap-target-min-size) / 2) auto auto calc(50% - var(--tap-target-min-size) / 2);
+        opacity: 0;
+        position: absolute;
+      }
+    }
+  }
 }
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index cdfede474..2ec3b248e 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -1,7 +1,7 @@
 <div id="<%= dom_id(card, :tags) %>" class="card__tags">
   <div data-controller="dialog"
         data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
-    <button class="card__tag-picker-button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
+    <button class="card__tag-picker-button btn btn--ensure-tap-target-size card__hide-on-index" style="--btn-background: var(--card-bg-color);"
         data-controller="tooltip hotkey" data-action="click->dialog#open:stop keydown.t@document->hotkey#click">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>