From a0681ca17c7a60c60592ec6c89ede15c736faefa Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 May 2026 15:53:52 +0300
Subject: [PATCH] allow emoji reacts to be non-square

---
 src/components/emoji_reactions/emoji_reactions.js   |  4 ++++
 src/components/emoji_reactions/emoji_reactions.scss | 12 ++++++++++++
 src/components/emoji_reactions/emoji_reactions.vue  |  2 ++
 src/components/notification/notification.vue        |  1 +
 src/components/notifications/notifications.scss     |  4 ++++
 5 files changed, 23 insertions(+)

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index e1a28a8f1..e22336138 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/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() {
diff --git a/src/components/emoji_reactions/emoji_reactions.scss b/src/components/emoji_reactions/emoji_reactions.scss
index 8ea45e1b4..88ff1cee6 100644
--- a/src/components/emoji_reactions/emoji_reactions.scss
+++ b/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;
       }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index e2361885a..16c69fa40 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/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
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index d0accc389..fbe45eceb 100644
--- a/src/components/notification/notification.vue
+++ b/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
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 79ef5b300..32839ebbf 100644
--- a/src/components/notifications/notifications.scss
+++ b/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 {