fix: wrap omnichannel transfer comments in system messages

[RakshithaMH24]

Problem

Omnichannel transfer comments were rendered in a single line and truncated with ellipsis.

Solution

Updated SystemMessage body styling to allow proper text wrapping using CSS
(white-space, word-break, overflow-wrap).

Result

Long transfer comments now display correctly across multiple lines.

Summary by CodeRabbit

• Bug Fixes
  • System messages now use improved text wrapping to prevent overflow and break long text across lines for better readability.
  • Timestamps are rendered on their own line, making message content and time clearer and easier to scan.

[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

[changeset-bot]

⚠️ No Changeset found

Latest commit: 75c7a23

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

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

SystemMessage JSX restructured: the message body rendering is wrapped with explicit styles (whiteSpace: 'normal', overflowWrap: 'anywhere') and the timestamp was moved into its own MessageSystemTimestamp element placed on a separate line outside the body block.

Changes

Cohort / File(s)	Summary
System Message Rendering apps/meteor/client/components/message/variants/SystemMessage.tsx	Wrapped the system message body in a conditional block with explicit styles (whiteSpace: 'normal', overflowWrap: 'anywhere'); moved timestamp into a separate MessageSystemTimestamp element rendered on its own line outside the body block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Check cross-browser behavior for whiteSpace / overflowWrap
• Confirm timestamp placement and spacing visually and in layout tests
• Verify no regressions in message formatting or accessibility attributes

Poem

🐇 I nudge the text to gently bend,

Long lines fold right around the end,
A timestamp hops to sit aside,
Neat messages now stretch with pride,
🥕✨ Hop, wrap, and glide.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: fixing text wrapping for omnichannel transfer comments in system messages by adjusting CSS styling properties.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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/client/components/message/variants/SystemMessage.tsx (1)

91-106: Text wrapping fix looks good; consider removing redundant property.

The explicit wrapping styles successfully address the truncation issue. The combination of whiteSpace: 'normal' and overflowWrap: 'anywhere' will ensure long transfer comments wrap properly across multiple lines.

However, wordBreak: 'break-word' is redundant alongside overflowWrap: 'anywhere' and is deprecated in modern CSS. Consider simplifying:

 <MessageSystemBody
 	data-qa-type='system-message-body'
 	style={{
 		whiteSpace: 'normal',
-		wordBreak: 'break-word',
 		overflowWrap: 'anywhere',
 	}}
 >

📜 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 848af33 and e352831.

📒 Files selected for processing (1)

• apps/meteor/client/components/message/variants/SystemMessage.tsx (1 hunks)

🧰 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:

• apps/meteor/client/components/message/variants/SystemMessage.tsx

🧠 Learnings (1)

📓 Common learnings

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.

Learnt from: MartinSchoeler
Repo: RocketChat/Rocket.Chat PR: 37408
File: apps/meteor/client/views/admin/ABAC/useRoomAttributeOptions.tsx:53-69
Timestamp: 2025-11-10T19:06:20.146Z
Learning: In the Rocket.Chat repository, do not provide suggestions or recommendations about code sections marked with TODO comments. The maintainers have already identified these as future work and external reviewers lack the full context about implementation plans and timing.

[RakshithaMH24]

Problem

Omnichannel transfer comments were rendered in a single line and truncated with ellipsis.

Solution

Updated SystemMessage body styling to allow proper text wrapping using CSS (white-space, word-break, overflow-wrap).

Result

Long transfer comments now display correctly across multiple lines.

Summary by CodeRabbit

• Bug Fixes

  • System messages now use improved text wrapping to prevent overflow and break long text across lines for better readability.
  • Timestamps are rendered on their own line, making message content and time clearer and easier to scan.

Thanks for taking a look! Happy to address any feedback or changes if needed.

[RakshithaMH24]

Hi Rocket.Chat team

All requested changes have been addressed:

• PR title updated to match conventional commits
• Redundant CSS removed as suggested
• All checks are passing

Kindly requesting a frontend code-owner review when available.
Thank you for your time and guidance!