regression: emoji avatars overlap message content and render undersized

Merged
AB
3mo ago
+25-4

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:

  1. 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.
  2. Native (unicode) emoji avatars rendered undersized. The base .emoji { font-size: 1.375rem } overrode the avatar box's 2.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: restore white-space: nowrap on .emoji--custom so the hidden shortcode stays clipped.
  • packages/ui-avatar/src/components/MessageAvatar.tsx: add min-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. Screenshot 2026-07-22 at 8 31 21 PM

Issue(s)

CORE-2454

Steps to test or reproduce

  1. Workspace → Integrations → Incoming → New; fill required fields, leave Avatar URL empty.
  2. Set Emoji to a custom emoji (e.g. :ghost1:), save, copy the webhook URL, and post a message through it.
  3. Repeat with a native emoji (e.g. :ghost:).
  4. 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

CORE-2454

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.