From 9f8e44614622d02417ec53eb2a1ff0d5dac2da15 Mon Sep 17 00:00:00 2001
From: litruv <litruv@gmail.com>
Date: Tue, 21 Jul 2026 15:38:27 +1000
Subject: [PATCH] Fix jumbo emoji styles for vanilla-extract selector rules.

---
 .../components/message/layout/layout.css.ts   | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index 136100d..64d71fa 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -1,4 +1,4 @@
-import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 import * as htmlCss from '../../../styles/CustomHtml.css';
@@ -232,25 +232,6 @@ export const MessageTextBody = recipe({
       true: {
         fontSize: toRem(100),
         lineHeight: toRem(100),
-        selectors: {
-          [`& .${htmlCss.EmoticonBase}`]: {
-            height: toRem(100),
-            padding: 0,
-            verticalAlign: 'bottom',
-          },
-          [`& .${htmlCss.Emoticon.classNames.base}`]: {
-            fontSize: toRem(100),
-            height: toRem(100),
-            minWidth: toRem(100),
-            lineHeight: toRem(100),
-            top: 0,
-          },
-          [`& .${htmlCss.EmoticonImg}`]: {
-            height: toRem(100),
-            width: toRem(100),
-            objectFit: 'contain',
-          },
-        },
       },
     },
     emote: {
@@ -263,3 +244,25 @@ export const MessageTextBody = recipe({
 });
 
 export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
+
+const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
+  height: toRem(100),
+  padding: 0,
+  verticalAlign: 'bottom',
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
+  fontSize: toRem(100),
+  height: toRem(100),
+  minWidth: toRem(100),
+  lineHeight: toRem(100),
+  top: 0,
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
+  height: toRem(100),
+  width: toRem(100),
+  objectFit: 'contain',
+});