regression: emoji bottom clipped in messages and announcement banner on Windows/Linux

[KevLehman]

Proposed changes (including videos or screenshots)

Native emoji glyphs render with their bottom cut off in message bodies and the room announcement banner on Windows (Segoe UI Emoji) and Linux (Noto Color Emoji). Not reproducible on macOS.

Two instances of the same root cause, introduced by the emojione removal (#39411):

• Messages: Fuselage's .rcx-message__emoji forces a fixed 1.5rem box (height/width/line-height), sized for the old sprite images. Native glyphs on Segoe/Noto paint taller and wider than that box (Noto ink ≈ 1.13em, advance ≈ 1.25em), and the overhang is clipped by .rcx-message-body's overflow: hidden. Apple Color Emoji ink stops just inside the box, which is why macOS is unaffected. Fixed by letting the box grow to the glyph (width/height: auto, line-height: 1.2), scoped to exclude custom image emojis; unitless line-height also covers the --big (emoji-only) variant.
• Announcement banner (and other MarkdownText surfaces): .emoji's line-height: 1.5rem (24px) is smaller than the 22px-font glyph box, so the emoji overhangs the truncated banner Box's overflow: hidden by 1px on each side plus the ink below the baseline. Fixed by line-height: 1.2 (26.4px), which contains the ink of all three platform emoji fonts.

Verified with a Chromium repro using the real Noto Color Emoji font (clip reproduced, then gone with the fix) and against a live server (emoji boxes now fully contained by their overflow: hidden ancestors; banner keeps its 40px height). Emoji picker, reactions, and thread previews pin their own line-heights and are unaffected. Lines containing an emoji grow ~2–5px, which is the space the glyph actually needs.

Follow-up (not for this release): move the glyph-aware sizing and the emoji font-family stack into Fuselage's MessageEmoji and drop these overrides from emoji.css.

Issue(s)

CORE-2433

Steps to test or reproduce

1. On Ubuntu or Windows, send a message containing an emoji — the glyph should render fully, nothing cut at the bottom.
2. Set a room announcement containing emojis — same result in the banner.
3. Send an emoji-only message (big emoji) and a custom emoji — both render as before, custom emoji box unchanged.

Further comments

CSS-only change. No changeset (regression fix targeting the release branch).

Windows

MacOS

Summary by CodeRabbit

• Bug Fixes
  • Improved emoji rendering in messages to prevent clipping.
  • Adjusted emoji sizing and line spacing for more accurate display across standard and custom emojis.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 71edb6c

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 Plus

Run ID: 2644e82f-3cfa-4417-a4a1-078ab93284ef

📥 Commits

Reviewing files that changed from the base of the PR and between fcf244e and 71edb6c.

📒 Files selected for processing (1)

• apps/meteor/app/theme/client/imports/components/emoji.css

📜 Recent review details

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

• GitHub Check: 🔨 Test UI (EE) / MongoDB 8.0 coverage (3/5)
• GitHub Check: 🔨 Test UI (EE) / MongoDB 8.0 coverage (2/5)
• GitHub Check: 🔨 Test UI (EE) / MongoDB 8.0 coverage (5/5)
• GitHub Check: 🔨 Test UI (EE) / MongoDB 8.0 coverage (4/5)
• GitHub Check: 🔨 Test UI (EE) / MongoDB 8.0 coverage (1/5)
• GitHub Check: 🔨 Test API (FIPS) / MongoDB 8.0 (1/1)
• GitHub Check: 🔨 Test API Apps (node-runtime - EE) / MongoDB 8.0 coverage (1/1)
• GitHub Check: 🔨 Test API Livechat (FIPS) / MongoDB 8.0 (1/1)
• GitHub Check: 🔨 Test UI (CE) / MongoDB 8.0 (2/4)
• GitHub Check: 🔨 Test API Livechat (CE) / MongoDB 8.0 (1/1)
• GitHub Check: 🔨 Test API Livechat (EE) / MongoDB 8.0 coverage (1/1)
• GitHub Check: 🔨 Test UI (CE) / MongoDB 8.0 (4/4)
• GitHub Check: 🔨 Test UI (CE) / MongoDB 8.0 (3/4)
• GitHub Check: 🔨 Test UI (CE) / MongoDB 8.0 (1/4)
• GitHub Check: 🔨 Test API (EE) / MongoDB 8.0 coverage (1/1)
• GitHub Check: 🔨 Test API (CE) / MongoDB 8.0 (1/1)
• GitHub Check: 🔨 Test Federation Matrix
• GitHub Check: cubic · AI code reviewer
• GitHub Check: Hacktron Security Check

🔇 Additional comments (1)

apps/meteor/app/theme/client/imports/components/emoji.css (1)

4-8: LGTM!

Also applies to: 38-47

---

Walkthrough

Emoji styling now uses a reduced line-height, with native message emojis given automatic dimensions to avoid glyph clipping.

Changes

Emoji rendering

Layer / File(s)	Summary
Global and message emoji layout apps/meteor/app/theme/client/imports/components/emoji.css	The global .emoji line-height changes to 1.2; non-custom message emojis use automatic width and height with the same line-height.

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

Possibly related PRs

• RocketChat/Rocket.Chat#41425: Updates emoji sizing behavior in the same stylesheet.
• RocketChat/Rocket.Chat#41517: Adjusts related native emoji clipping and layout rules.
• RocketChat/Rocket.Chat#41527: Addresses native emoji alignment and line-height behavior.

Suggested labels: type: bug

Suggested reviewers: abhinavkrin, 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 and accurately summarizes the main fix: clipped native emojis in messages and announcement banners on Windows/Linux.
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

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.14.0)

apps/meteor/app/theme/client/imports/components/emoji.css

ConfigurationError: Could not find "stylelint-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at toAbsolutePath (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:185:11)
at Array.map ()
at absolutizePaths (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:192:44)
at augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:95:9)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (3)

• CORE-2433: Request failed with status code 401
• B12289AC-8849: Request failed with status code 401
• CB02-4481: 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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.55%. Comparing base (fcf244e) to head (71edb6c).

Additional details and impacted files

@@                Coverage Diff                @@
##           release-8.7.0   #41555      +/-   ##
=================================================
- Coverage          68.61%   68.55%   -0.07%     
=================================================
  Files               4138     4138              
  Lines             159416   159419       +3     
  Branches           28206    28154      -52     
=================================================
- Hits              109384   109288      -96     
- Misses             44893    44998     +105     
+ Partials            5139     5133       -6     

Flag	Coverage Δ
e2e	58.86% <ø> (+0.01%)	⬆️
e2e-api	45.37% <ø> (-0.26%)	⬇️
unit	70.51% <ø> (-0.07%)	⬇️

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.

[cubic-dev-ai]

No issues found across 1 file

_{Re-trigger cubic}