regression: native emojis crowding surrounding text on Linux

[nazabucciarelli]

Proposed changes (including videos or screenshots)

Cause: The fuselage package brings a rule that applies to all emojis in a message, not only to custom ones:

node_modules/@rocket.chat/fuselage/dist/fuselage.css)

.rcx-message__emoji { 
   background-size:contain;
   display:inline-block;
   font-size:1.5rem;
   height:1.5rem;
   line-height:1.5rem;
   margin-left:.125rem;
   margin-right:.125rem;
   width:1.5rem
}

This forces a fixed box of 1.5rem x 1.5rem with display: inline-block, but for a native emoji, if the font draws the glyph wider than that box (the case of Linux), it overflows visually, eating that margin of 0.125rem.

Issue(s)

CORE-2482 [Regression] Native emojis render too close to surrounding text on Linux

Steps to test or reproduce

Precondition: Being on a Linux OS

1. Send a message with a native emoji (not custom) to any channel, for example: hello 😛 hello
2. Check that there's a consisten gap between the emoji and the surrounding text, like this:

How it shouldn't look like:

Further comments

Summary by CodeRabbit

• Bug Fixes
  • Improved native emoji rendering in messages.
  • Prevented native emojis from being constrained by custom emoji sizing, preserving proper dimensions and spacing.

[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
• This PR is targeting the wrong base branch. It should target 8.7.0, but it targets 8.8.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8487d68

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]

Walkthrough

Changes

Message emoji styling

Layer / File(s)	Summary
Native emoji rendering override apps/meteor/app/theme/client/imports/components/emoji.css	Adds a :not(--custom) rule that gives native emojis automatic width and .15em .05em margins to prevent overflow within the custom emoji box.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• RocketChat/Rocket.Chat#41425: Updates the same emoji CSS block and related sizing rules.
• RocketChat/Rocket.Chat#41517: Adjusts native and custom emoji styling in the same stylesheet.
• RocketChat/Rocket.Chat#41527: Changes native emoji layout styling in messages.

Suggested labels: type: bug

Suggested reviewers: cardoso

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the Linux native emoji spacing regression fixed by the CSS change.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• CORE-2482: 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.70%. Comparing base (b27e38c) to head (8487d68).
⚠️ Report is 3 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #41607      +/-   ##
===========================================
- Coverage    68.75%   68.70%   -0.05%     
===========================================
  Files         4150     4151       +1     
  Lines       159416   159491      +75     
  Branches     27997    27945      -52     
===========================================
- Hits        109609   109581      -28     
- Misses       44629    44724      +95     
- Partials      5178     5186       +8     

Flag	Coverage Δ
e2e	58.85% <ø> (+0.01%)	⬆️
e2e-api	45.59% <ø> (-0.32%)	⬇️
unit	70.68% <ø> (-0.04%)	⬇️

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}

[nazabucciarelli]

Closed as #41555 already addresses this issue