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