From ae70eae0fc7992322787badfe7e5fab365e7a454 Mon Sep 17 00:00:00 2001
From: litruv <litruv@gmail.com>
Date: Wed, 22 Jul 2026 20:14:09 +1000
Subject: [PATCH] Fix jumbo emoji sizing in production builds.

Set jumbo font-size on the message body and inherit Text size so T400 no longer keeps emoji-only messages small.
---
 src/app/components/message/layout/Base.tsx      |  2 +-
 src/app/components/message/layout/layout.css.ts | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/components/message/layout/Base.tsx b/src/app/components/message/layout/Base.tsx
index aa5ffbf..c1bfe00 100644
--- a/src/app/components/message/layout/Base.tsx
+++ b/src/app/components/message/layout/Base.tsx
@@ -32,7 +32,7 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
   ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
     <Text
       as={asComp}
-      size="T400"
+      size={jumboEmoji ? 'Inherit' : 'T400'}
       priority={notice ? '300' : '400'}
       className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
       data-allow-text-selection="true"
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index 8eb9a7d..fc75c96 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -230,6 +230,7 @@ export const MessageTextBody = recipe({
     },
     jumboEmoji: {
       true: {
+        fontSize: jumboEmojiSize,
         lineHeight: 1,
         overflow: 'visible',
         overflowY: 'visible',
@@ -249,16 +250,16 @@ export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
 const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
 
 globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
-  height: jumboEmojiSize,
+  height: '1em',
   padding: 0,
   overflow: 'visible',
   verticalAlign: 'middle',
 });
 
 globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
-  fontSize: jumboEmojiSize,
-  height: jumboEmojiSize,
-  minWidth: jumboEmojiSize,
+  fontSize: '1em',
+  height: '1em',
+  minWidth: '1em',
   lineHeight: 1,
   position: 'static',
   top: 0,
@@ -266,8 +267,8 @@ globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
 });
 
 globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
-  height: jumboEmojiSize,
-  width: jumboEmojiSize,
+  height: '1em',
+  width: '1em',
   maxHeight: 'none',
   objectFit: 'contain',
 });