From 9ca4cda5e4cfc69547f4f666e118dc0f1ac0ddfd Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 26 Nov 2025 11:13:18 -0600
Subject: [PATCH 1/2] Larger emojis in picker, fit on narrow viewports

---
 app/assets/stylesheets/reactions.css | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index d736b03cb..421c56d23 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -176,8 +176,8 @@
   }
 
   .reaction__popup {
-    --panel-border-radius: 1.2em;
-    --panel-padding: 0.5ch;
+    --panel-border-radius: 1em;
+    --panel-padding: var(--block-space-half) var(--inline-space);
     --offset: calc(-1 * var(--panel-padding));
 
     inset: var(--offset) auto auto var(--offset);
@@ -187,12 +187,17 @@
 
   .reaction__emoji-list {
     display: grid;
+    gap: var(--inline-space-half);
     grid-template-columns: repeat(10, 1fr);
 
-    .btn {
-      --btn-size: 1.5rem;
+    @media (max-width: 630px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
 
-      font-size: 1rem;
+    .btn {
+      --btn-size: calc(1.3rem * 1.3);
+
+      font-size: 1.3rem;
       position: relative;
 
       /* Make sure the focus ring sits on top of adjacent buttons */
@@ -203,7 +208,7 @@
       }
 
       &:hover {
-        scale: 1.5;
+        scale: 1.3;
       }
     }
   }

From e26845709a33573badb6bffe720a4818f40bdf28 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 26 Nov 2025 11:24:13 -0600
Subject: [PATCH 2/2] Disable focus ring

---
 app/views/cards/comments/reactions/_menu.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/cards/comments/reactions/_menu.html.erb b/app/views/cards/comments/reactions/_menu.html.erb
index 698ba4ad7..6bde12e82 100644
--- a/app/views/cards/comments/reactions/_menu.html.erb
+++ b/app/views/cards/comments/reactions/_menu.html.erb
@@ -6,7 +6,7 @@
   <dialog class="reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
     <div class="reaction__emoji-list">
       <% EmojiHelper::REACTIONS.each do |character, title| %>
-        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless", type: "button", data: { action: "reaction-emoji#insertEmoji dialog#close", emoji: character } %>
+        <%= tag.button character, title: title, class: "reaction__emoji-btn btn btn--circle borderless hide-focus-ring", type: "button", data: { action: "reaction-emoji#insertEmoji dialog#close", emoji: character } %>
       <% end %>
     </div>
   </dialog>