fix: ensure omnichannel transfer comment text wraps to multiple lines

[bhanreddy1973]

Proposed changes (including videos or screenshots)

The transfer comment in omnichannel system messages was not wrapping when the comment was longer than the available space. This was caused by the Fuselage MessageSystemBody component using text truncation styles (white-space: nowrap, text-overflow: ellipsis) and the parent flex container (.rcx-message-system__block) not allowing wrap.

Changes Made:

• Added flex-wrap: wrap to .rcx-message-system__block to allow the flex container to wrap content
• Override white-space, text-overflow, and overflow on .rcx-message-system__body to allow text wrapping
• Added flex-shrink and min-width properties to enable proper text wrapping behavior

Before (Bug):

After (Fixed):

Issue(s)

Fixes #26723

Steps to test or reproduce

1. Enable Omnichannel in Administration → Settings → Omnichannel
2. Add yourself as an agent and set status to "Available"
3. Create a new livechat conversation (open /livechat in incognito browser)
4. Accept the chat as an agent
5. Click Forward to transfer the chat
6. Enter a very long comment like:
   "ThisIsAVeryLongCommentThatShouldWrapToMultipleLinesInsteadOfOverflowingHorizontallyWhichWasThePreviousBehaviorBeforeTheFix"
7. Complete the transfer
8. Expected Result: The transfer system message should display the comment wrapped across multiple lines instead of being truncated with ellipsis

Further comments

This is a CSS-only fix that overrides the default Fuselage component styles. The fix is minimal and targeted specifically at the system message body element to avoid unintended side effects on other components.

Root cause:

• .rcx-message-system__block uses display: flex with flex-direction: row which keeps all items on one line
• .rcx-message-system__body uses Fuselage's truncation mixin which adds white-space: nowrap and text-overflow: ellipsis

Solution:

• Allow the flex container to wrap with flex-wrap: wrap
• Override truncation styles to enable normal text wrapping

Summary by CodeRabbit

• Bug Fixes
  • Fixed text wrapping and display issues in Omnichannel transfer comments to ensure messages render properly with correct word breaks and no unexpected truncation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0c56f91

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

[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 missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

This PR adds CSS rules to the base theme stylesheet to fix text wrapping issues in Omnichannel transfer comments. The changes introduce flexbox wrapping on message system blocks and apply word-breaking properties to message bodies to ensure long comment text wraps correctly rather than overflowing.

Changes

Cohort / File(s)	Summary
Omnichannel Transfer Comment Text Wrapping Fix apps/meteor/app/theme/client/imports/general/base.css	Added .rcx-message-system__block with flex-wrap: wrap to enable flexible wrapping. Extended .rcx-message-system__body with text wrapping properties (white-space: normal, word-wrap: break-word, word-break: break-word, overflow-wrap: break-word) and overflow handling (text-overflow: clip, overflow: visible, flex-shrink: 1, min-width: 0) to force multi-line rendering of long comments.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A hop and a skip, a wrap and a whip,
The text now flows with grace!
No more runaway words from transfer's command,
They nestle in their rightful place. ✨

Pre-merge checks and finishing touches

✅ 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 concisely summarizes the main change: fixing omnichannel transfer comment text wrapping to multiple lines, which directly addresses the primary objective of the PR.
Linked Issues check	✅ Passed	The code changes directly address issue #26723 by adding CSS rules to enable text wrapping in omnichannel transfer comments, matching the expected behavior of wrapping text to multiple lines.
Out of Scope Changes check	✅ Passed	All changes are focused and targeted CSS-only modifications to fix the text wrapping issue, with no unrelated or out-of-scope changes present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/meteor/app/theme/client/imports/general/base.css (1)

119-128: Simplify redundant word-breaking properties.

The CSS correctly enables text wrapping, but includes redundant word-breaking declarations:

• word-wrap: break-word is a legacy alias for overflow-wrap
• word-break: break-word is deprecated per W3C CSS Text Module Level 3 spec
• overflow-wrap: break-word is the modern standard

These can be safely consolidated:

 .rcx-message-system__body {
 	white-space: normal !important;
-	word-wrap: break-word;
-	word-break: break-word;
 	overflow-wrap: break-word;
 	text-overflow: clip !important;
 	overflow: visible !important;
 	flex-shrink: 1;
 	min-width: 0;
 }

Note: This rule overrides Fuselage's internal .rcx-message-system__body class to fix text wrapping in system messages (issue #26723). If Fuselage updates its class structure, this override may need adjustment.

📜 Review details

Configuration used: Organization 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 c805070 and 0c56f91.

📒 Files selected for processing (1)

• apps/meteor/app/theme/client/imports/general/base.css

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-19T18:20:07.720Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37419
File: packages/i18n/src/locales/en.i18n.json:918-921
Timestamp: 2025-11-19T18:20:07.720Z
Learning: Repo: RocketChat/Rocket.Chat — i18n/formatting
Learning: This repository uses a custom message formatting parser in UI blocks/messages; do not assume standard Markdown rules. For keys like Call_ended_bold, Call_not_answered_bold, Call_failed_bold, and Call_transferred_bold in packages/i18n/src/locales/en.i18n.json, retain the existing single-asterisk emphasis unless maintainers request otherwise.

Applied to files:

• apps/meteor/app/theme/client/imports/general/base.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

🔇 Additional comments (1)

apps/meteor/app/theme/client/imports/general/base.css (1)

114-117: The flex-wrap: wrap approach is sound, and the global application to all system messages is appropriate.

The flex-wrap: wrap property correctly enables flex items to wrap to multiple lines. While this CSS rule applies globally to all .rcx-message-system__block elements (not just Omnichannel transfer comments), this appears intentional—the complementary text-wrapping properties added to .rcx-message-system__body (lines 119–128) also apply globally and are part of the same fix. The change benefits all system messages by improving text wrapping and readability without negative side effects.

[cubic-dev-ai]

No issues found across 1 file