From 7245775b279ff022f22eaecaa627c9e940473420 Mon Sep 17 00:00:00 2001
From: Riedler <git@riedler.wien>
Date: Wed, 26 Mar 2025 06:51:51 +0100
Subject: [PATCH 1/4] fix: picked reactions should be positioned identically

---
 src/components/emoji_reactions/emoji_reactions.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index be70d522..16ef58a1 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -97,9 +97,9 @@
 }
 
 .button-default.picked-reaction {
-  border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
+  &, &:hover {
+    box-shadow: inset 0 0 0 1px var(--accent, $fallback--link);
+  }
 }
 
 </style>

From e87a9ced6156bff4b534722b7dc364770e6b348a Mon Sep 17 00:00:00 2001
From: Riedler <git@riedler.wien>
Date: Wed, 26 Mar 2025 07:12:45 +0100
Subject: [PATCH 2/4] fix: no more emojis bleeding into button borders

---
 src/components/emoji_reactions/emoji_reactions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 16ef58a1..3d674d9b 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -58,7 +58,7 @@
 }
 
 .emoji-reaction {
-  padding: 0 0.5em;
+  padding: 2px 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   display: flex;

From e62b15422877733e5449296ec008cacc18302cab Mon Sep 17 00:00:00 2001
From: Riedler <git@riedler.wien>
Date: Wed, 26 Mar 2025 07:39:54 +0100
Subject: [PATCH 3/4] fix: uniform height sizing and layouting

---
 .../emoji_reactions/emoji_reactions.vue       | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 3d674d9b..6c4f5829 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -11,7 +11,7 @@
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span
+        <template
           v-if="reaction.url !== null"
         >
           <StillImage
@@ -19,16 +19,15 @@
             :title="reaction.name"
             :alt="reaction.name"
             class="reaction-emoji"
-            height="2.55em"
           />
           {{ reaction.count }}
-        </span>
-        <span v-else>
+        </template>
+        <template v-else>
           <span class="reaction-emoji unicode-emoji">
             {{ reaction.name }}
           </span>
           <span>{{ reaction.count }}</span>
-        </span>
+        </template>
       </button>
     </UserListPopover>
     <a
@@ -53,23 +52,26 @@
   container-type: inline-size;
 }
 
-.unicode-emoji {
-  font-size: 210%;
-}
-
 .emoji-reaction {
   padding: 2px 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+  align-items: end;
+
   .reaction-emoji {
     width: auto;
     max-width: 96cqw;
-    height: 2.55em !important;
     margin-right: 0.25em;
+
+    &.still-image {
+      height: 2.55em;
+    }
+    &.unicode-emoji {
+      display: inline-block;
+      font-size: 2.55em;
+      line-height: 1em;
+    }
   }
   &:focus {
     outline: none;

From 4ce8ffcec1acbb901a54258d69b0b2a0c15d092f Mon Sep 17 00:00:00 2001
From: Riedler <git@riedler.wien>
Date: Wed, 26 Mar 2025 09:09:56 +0100
Subject: [PATCH 4/4] fix: shrink unicode emojis in reactions slightly

some large ones exceeded container boundaries before
---
 src/components/emoji_reactions/emoji_reactions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 6c4f5829..e57b2458 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -69,8 +69,8 @@
     }
     &.unicode-emoji {
       display: inline-block;
-      font-size: 2.55em;
-      line-height: 1em;
+      font-size: 2.125em; // assuming default line height of 1.2rem and emojis that don't exceed line height
+      line-height: 2.55rem;
     }
   }
   &:focus {