regression: emoji avatars overlap message content and render undersized
Merged
AB
3mo ago+25+25+01234567890123456789-4-4-0123456789
Proposed changes (including videos or screenshots)
PR #39411 (emojione → native emoji migration) introduced two regressions in how emoji avatars render on messages — the avatar used by incoming webhooks/bots that set an emoji instead of an avatar image:
- Custom (image) emoji avatars overlapped the message. The emoji-hiding CSS lost
white-space: nowrap, so the hidden:shortcode:text wrapped into view. Combined with the new avatar<Box>wrapper (a flex item that shrink-wrapped to the hidden text's width), the avatar blew out well past 36px, showed the shortcode name, and overlapped the username/message content. - Native (unicode) emoji avatars rendered undersized. The base
.emoji { font-size: 1.375rem }overrode the avatar box's2.25rem, so native emoji rendered at ~22px inside a 36px avatar instead of filling it.
Fixes (all scoped to the message avatar; inline message emojis, reactions, and the emoji picker are untouched):
apps/meteor/app/theme/client/imports/components/emoji.css: restorewhite-space: nowrapon.emoji--customso the hidden shortcode stays clipped.packages/ui-avatar/src/components/MessageAvatar.tsx: addmin-width: 0; overflow: hidden;to the avatar box so the hidden shortcode can't drive its width, and.emoji { font-size: inherit; line-height: inherit; }so native emoji fill the avatar.
Issue(s)
Steps to test or reproduce
- Workspace → Integrations → Incoming → New; fill required fields, leave Avatar URL empty.
- Set Emoji to a custom emoji (e.g.
:ghost1:), save, copy the webhook URL, and post a message through it. - Repeat with a native emoji (e.g.
:ghost:). - Expected: the emoji is centered and fills the 36px avatar, the message content sits beside it with no overlap, and no shortcode text is shown.
Further comments
Summary by CodeRabbit
Summary by CodeRabbit
- Bug Fixes
- Prevented custom emoji from wrapping to keep them visually consistent.
- Updated message avatar emoji rendering to be size-aware, improving scaling across different avatar sizes.
- Tightened avatar emoji layout (including overflow handling and typography) so emoji display aligns with surrounding avatar text without layout glitches.