allow emoji reacts to be non-square

src/components/emoji_reactions/emoji_reactions.js

@@ -3,6 +3,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCheck, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
@@ -48,6 +49,9 @@ const EmojiReactions = {
         statusId: this.status.id,
       })
     },
+    allowNonSquareEmoji() {
+      return useMergedConfigStore().mergedConfig.nonSquareEmoji
+    },
   },
   methods: {
     toggleShowAll() {

src/components/emoji_reactions/emoji_reactions.scss

@@ -49,6 +49,12 @@
       justify-content: center;
       align-items: center;
 
+      &.-wide {
+        width: auto;
+        min-width: var(--emoji-size);
+        max-width: calc(var(--emoji-size) * 3);
+      }
+
       --_still_image-label-scale: 0.3;
     }
 
@@ -62,6 +68,12 @@
       font-size: calc(var(--emoji-size) * 0.8);
       margin: 0;
 
+      &.-wide {
+        width: auto;
+        min-width: var(--emoji-size);
+        max-width: calc(var(--emoji-size) * 3);
+      }
+
       img {
         object-fit: contain;
       }

src/components/emoji_reactions/emoji_reactions.vue

@@ -17,11 +17,13 @@
       >
         <span
           class="reaction-emoji"
+          :class="{ ['-wide']: allowNonSquareEmoji }"
         >
           <StillImage
             v-if="reaction.url"
             :src="reaction.url"
             class="reaction-emoji-content"
+            :class="{ ['-wide']: allowNonSquareEmoji }"
           />
           <span
             v-else

src/components/notification/notification.vue

@@ -137,6 +137,7 @@
                     :src="notification.emoji_url"
                     :alt="notification.emoji"
                     :title="notification.emoji"
+                    :class="{ ['-wide']: allowNonSquareEmoji }"
                   >
                   <span
                     v-else

src/components/notifications/notifications.scss

@@ -119,6 +119,10 @@
     max-width: 1.25em;
     height: 1.25em;
     width: auto;
+
+    &.-wide {
+      max-width: 3.75em;
+    }
   }
 
   .emoji-reaction-emoji-image {