make emoji reaction buttons smaller

src/components/emoji_reactions/emoji_reactions.vue

@@ -14,7 +14,10 @@
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span v-if="reaction.url !== null">
+        <span
+          v-if="reaction.url !== null"
+          class="emoji-button-inner"
+        >
           <img
             :src="reaction.url"
             :title="reaction.name"
@@ -23,7 +26,10 @@
           />
           {{ reaction.count }}
         </span>
-        <span v-else>
+        <span
+          v-else
+          class="emoji-button-inner"
+        >
           <span class="reaction-emoji unicode-emoji">
             {{ reaction.name }}
           </span>
@@ -53,7 +59,7 @@
 }
 
 .unicode-emoji {
-  font-size: 210%;
+  font-size: 128%;
 }
 
 .emoji-reaction {
@@ -61,13 +67,17 @@
   margin-right: 0.5em;
   margin-top: 0.5em;
   display: flex;
+  height: 28px;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   .reaction-emoji {
-    width: 2.55em !important;
     margin-right: 0.25em;
   }
+  img.reaction-emoji {
+    width: 1.55em !important;
+    display: block;
+  }
   &:focus {
     outline: none;
   }
@@ -94,8 +104,12 @@
 }
 
 .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);
+  background: none;
+  padding: 1px 0.5em;
+
+  .emoji-button-inner {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>