Skip to content

fix: custom emoji align vertically in message#6738

Merged
diegolmello merged 11 commits intodevelopfrom
align-custom-emoji-in-chat
Dec 12, 2025
Merged

fix: custom emoji align vertically in message#6738
diegolmello merged 11 commits intodevelopfrom
align-custom-emoji-in-chat

Conversation

@Rohit3523
Copy link
Copy Markdown
Contributor

@Rohit3523 Rohit3523 commented Oct 18, 2025 •
edited by diegolmello
Loading

Proposed changes

Right now custom emojis are not vertically center aligned in the chat which make the UI look bad. After some research i found that we can't vertically align image inside text and only way to make is center is applying translateY to the image

I can confirm that sending single emoji will not have different behaviour

Issue(s)

https://rocketchat.atlassian.net/browse/COMM-89

How to test or reproduce

Screenshots

Platform Before After
Android Screenshot 2025-10-19 at 1 00 00 AM Screenshot 2025-10-19 at 1 01 21 AM
iOS Screenshot 2025-10-19 at 1 00 57 AM Screenshot 2025-10-19 at 1 01 49 AM

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • Improvement (non-breaking change which improves a current function)
  • New feature (non-breaking change which adds functionality)
  • Documentation update (if none of the other choices apply)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the CLA
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • I have added necessary documentation (if applicable)
  • Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

  • Bug Fixes
    • Improved emoji vertical alignment and positioning — when emojis are displayed they now have better vertical offset handling for big emojis, avatar-sized emojis, and regular emojis, reducing visual jitter and ensuring more consistent appearance across messages and components.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Oct 18, 2025 •
edited
Loading

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (3)
  • app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap is excluded by !**/*.snap
  • app/containers/markdown/__snapshots__/Markdown.test.tsx.snap is excluded by !**/*.snap
  • app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Emoji rendering was changed to wrap CustomEmoji in a View with a conditional vertical translateY transform: 0 when isBigEmoji or isAvatar is true, otherwise 3.

Changes

Cohort / File(s) Summary
Emoji component rendering
app/containers/markdown/components/emoji/Emoji.tsx		 Added View import from react-native; when an emoji exists, wrap CustomEmoji in a View that applies `transform: [{ translateY: isBigEmoji

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • diegolmello
  • OtavioStasiak

Poem

🐰 A little hop, a three-pixel sway,
We tuck the emoji gently away.
Big or avatar—stay straight and tall,
Small ones drift just a tad, not all.
Wrapped and snug, they bounce with glee.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed The pull request title "fix: custom emoji align vertically in message" directly and accurately describes the main change in the changeset. The modification wraps custom emoji components in a View with a translateY transform to adjust their vertical alignment in chat messages, which is exactly what the title conveys. The title is concise, clear, and uses appropriate conventional commit formatting, making it easy for reviewers scanning the history to understand the primary purpose of the change.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@Rohit3523 Rohit3523 requested a review from diegolmello October 18, 2025 19:33
coderabbitai[bot]
coderabbitai bot reviewed Oct 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 390dc39 and cec0ab8.

📒 Files selected for processing (1)
  • app/containers/markdown/components/emoji/Emoji.tsx (2 hunks)
🧰 Additional context used
🪛 ESLint
app/containers/markdown/components/emoji/Emoji.tsx

[error] 3-3: All imports in the declaration are only used as types. Use import type.

(@typescript-eslint/consistent-type-imports)

🪛 GitHub Check: ESLint and Test / run-eslint-and-test
app/containers/markdown/components/emoji/Emoji.tsx

[failure] 3-3:
All imports in the declaration are only used as types. Use import type

@Rohit3523 Rohit3523 had a problem deploying to experimental_ios_build December 4, 2025 13:31 — with GitHub Actions Error
@Rohit3523 Rohit3523 had a problem deploying to official_android_build December 4, 2025 13:31 — with GitHub Actions Error
@Rohit3523 Rohit3523 had a problem deploying to experimental_android_build December 4, 2025 13:31 — with GitHub Actions Error
@Rohit3523 Rohit3523 force-pushed the align-custom-emoji-in-chat branch from 3c1199f to 39de1a1 Compare December 4, 2025 14:03
@Rohit3523 Rohit3523 had a problem deploying to experimental_android_build December 4, 2025 14:10 — with GitHub Actions Error
@Rohit3523 Rohit3523 had a problem deploying to experimental_ios_build December 4, 2025 14:10 — with GitHub Actions Error
@Rohit3523 Rohit3523 had a problem deploying to official_android_build December 4, 2025 14:10 — with GitHub Actions Error
@Rohit3523
Copy link
Copy Markdown
Contributor Author

Rohit3523 commented Dec 4, 2025

We noticed that Storybook wasn’t updated and after pulling the changes from the develop branch, GitHub showed 272 file changes. To fix this, I reverted the merge commit and force-pushed the branch. After that, I updated the branch using the GitHub UI and then I pushed the updated Storybook snapshots

@diegolmello diegolmello merged commit 65bfa8a into develop Dec 12, 2025
5 of 6 checks passed
@diegolmello diegolmello deleted the align-custom-emoji-in-chat branch December 12, 2025 12:39
@diegolmello diegolmello had a problem deploying to experimental_android_build December 12, 2025 12:42 — with GitHub Actions Failure
@diegolmello diegolmello had a problem deploying to experimental_ios_build December 12, 2025 12:42 — with GitHub Actions Failure
@diegolmello diegolmello had a problem deploying to official_android_build December 12, 2025 12:42 — with GitHub Actions Failure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@diegolmello diegolmello diegolmello approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Rohit3523 @diegolmello