regression: emoji avatars overlap message content and render undersized

[abhinavkrin]

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.

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.

[dionisio-bot]

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: ad70e15

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 37722b9c-5776-44ee-91f4-8906b1406f43

📥 Commits

Reviewing files that changed from the base of the PR and between 0334c41 and ad70e15.

📒 Files selected for processing (1)

• packages/ui-avatar/src/components/MessageAvatar.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (3)

• GitHub Check: CodeQL-Build
• GitHub Check: Hacktron Security Check
• GitHub Check: CodeQL-Build

⚠️ CI failures not shown inline (5)

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

---

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

---

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

---

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

---

GitHub Check: Dionisio QA: Some checks did not pass

Conclusion: failure

View job details

**Conclusion:** failure
### Steps
- ✅ **No merge conflicts**
- ❌ **QA assured** — This PR is missing the 'stat: QA assured' label
- ✅ **Mergeable**
- ✅ **Has milestone or project**
- ✅ **Valid PR title**
- ✅ **Correct target version**

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• packages/ui-avatar/src/components/MessageAvatar.tsx

🧠 Learnings (2)

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• packages/ui-avatar/src/components/MessageAvatar.tsx

📚 Learning: 2026-05-06T12:21:44.083Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

• packages/ui-avatar/src/components/MessageAvatar.tsx

🔇 Additional comments (1)

packages/ui-avatar/src/components/MessageAvatar.tsx (1)

14-19: LGTM!

Also applies to: 21-40

---

Walkthrough

Custom emoji content no longer wraps. Message avatar emoji styling now derives font size from avatar size and constrains overflow, width, nested typography, and non-custom emoji alignment.

Changes

Emoji layout

Layer / File(s)	Summary
Custom emoji wrapping apps/meteor/app/theme/client/imports/components/emoji.css	Custom emoji content uses white-space: nowrap.
Message avatar emoji rendering packages/ui-avatar/src/components/MessageAvatar.tsx	Emoji font size is derived from size, with a fallback; nested emoji inherit typography, while overflow, width, and non-custom alignment are constrained.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• RocketChat/Rocket.Chat#39411: Modifies shared custom emoji styling in the same CSS file.

Suggested labels: type: bug

Suggested reviewers: sampaiodiego, martinschoeler

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main regression fix: emoji avatars overlapping content and rendering too small.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• CORE-2454: Request failed with status code 401

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cubic-dev-ai]

No issues found across 2 files

_{Re-trigger cubic}

[abhinavkrin]

Native emoji avatars were hardcoded to a single font-size, so they didn't actually match their container.

Case 1 — regular messages (x36)
Cropped / not properly centered.

Before:

After:

Case 2 — thread previews (x18)
Oversized and clipped, since the font-size was hardcoded to the x36 value regardless of the actual avatar size.

Before:

After:

[abhinavkrin]

Note on the / 16 in getEmojiFontSize. Not a magic number.

AvatarContainer's size prop is a closed union of 'x{px}' tokens (x16, x18, ... x36, ... x332). The number after x is literally the avatar's pixel size, by fuselage's own naming convention.

1rem = 16px is the CSS default root font-size, and this app never overrides it (checked html {} across apps/meteor/app/theme, no font-size set there).

So Number(size.slice(1)) / 16 is an exact px to rem conversion of a value we already know precisely, not a heuristic or guess.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.55%. Comparing base (ea64e17) to head (ad70e15).
⚠️ Report is 19 commits behind head on release-8.7.0.

Additional details and impacted files

@@                Coverage Diff                @@
##           release-8.7.0   #41517      +/-   ##
=================================================
- Coverage          68.59%   68.55%   -0.04%     
=================================================
  Files               4134     4136       +2     
  Lines             160802   159221    -1581     
  Branches           29298    27913    -1385     
=================================================
- Hits              110303   109155    -1148     
+ Misses             45392    44921     -471     
- Partials            5107     5145      +38     

Flag	Coverage Δ
e2e	58.87% <ø> (+0.01%)	⬆️
e2e-api	45.39% <ø> (+0.05%)	⬆️
unit	70.51% <ø> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cardoso]

QA

Screen.Recording.2026-07-23.at.09.49.03.mov