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:
@@ -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"
|
||||
|
||||
@@ -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',
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user