Merge pull request #2643 from basecamp/mobile/fix-tag-button-tap-target

Mobile / Fix tag button tap target

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;
+      }
+    }
+  }
 }

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>