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.
This commit is contained in:
2026-07-22 20:14:09 +10:00
parent c286501be8
commit ae70eae0fc
2 changed files with 8 additions and 7 deletions

View File

@@ -32,7 +32,7 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => ( ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
<Text <Text
as={asComp} as={asComp}
size="T400" size={jumboEmoji ? 'Inherit' : 'T400'}
priority={notice ? '300' : '400'} priority={notice ? '300' : '400'}
className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)} className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
data-allow-text-selection="true" data-allow-text-selection="true"

View File

@@ -230,6 +230,7 @@ export const MessageTextBody = recipe({
}, },
jumboEmoji: { jumboEmoji: {
true: { true: {
fontSize: jumboEmojiSize,
lineHeight: 1, lineHeight: 1,
overflow: 'visible', overflow: 'visible',
overflowY: 'visible', overflowY: 'visible',
@@ -249,16 +250,16 @@ export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true; const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, { globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
height: jumboEmojiSize, height: '1em',
padding: 0, padding: 0,
overflow: 'visible', overflow: 'visible',
verticalAlign: 'middle', verticalAlign: 'middle',
}); });
globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, { globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
fontSize: jumboEmojiSize, fontSize: '1em',
height: jumboEmojiSize, height: '1em',
minWidth: jumboEmojiSize, minWidth: '1em',
lineHeight: 1, lineHeight: 1,
position: 'static', position: 'static',
top: 0, top: 0,
@@ -266,8 +267,8 @@ globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
}); });
globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, { globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
height: jumboEmojiSize, height: '1em',
width: jumboEmojiSize, width: '1em',
maxHeight: 'none', maxHeight: 'none',
objectFit: 'contain', objectFit: 'contain',
}); });