fix: enable text wrapping for omnichannel transfer comments in system messages

[rajanarahul93]

Summary

Fixed the issue where omnichannel transfer comments were not wrapping to multiple lines in system messages, instead showing truncated text with "...". This affects the readability of transfer comments in the omnichannel workflow.

Root Cause

The MessageSystemBody component in system messages lacked CSS properties for proper text wrapping, causing long transfer comments to overflow and display as truncated text.

Changes

• Added text wrapping styles to MessageSystemBody component in SystemMessage.tsx
• Applied whiteSpace: 'pre-wrap', wordWrap: 'break-word', and overflowWrap: 'break-word' properties
• Follows React/TypeScript inline styling patterns without requiring global CSS modifications
• Addresses maintainer feedback from previous PR attempts to avoid CSS file modifications

Testing

• Verified text wraps properly across multiple lines for long transfer comments
• Tested with various comment lengths to ensure consistent behavior
• Confirmed layout remains intact and responsive
• Special characters and line breaks are preserved correctly

Risk Assessment

• Risk Level: Low - Only affects the visual presentation of the system message text
• Scope: Limited to omnichannel transfer comment display in system messages
• Rollback Plan: Simple revert by removing the added style prop

Related Issues

• Closes Omnichannel transfer comment is not wrapped to multiple lines #26723
• Addresses maintainer feedback from PR [IMPROVE] Omnichannel Transfer Comment Not Wrapped To Multiple Lines #27080 regarding proper component-level styling
• Follows Fuselage design system guidelines as requested by maintainers

Compliance

• ✅ Follows TypeScript/React best practices
• ✅ Uses inline styling as recommended by maintainers
• ✅ No global CSS modifications
• ✅ Maintains existing component structure
• ✅ Preserves accessibility attributes

Summary by CodeRabbit

• Bug Fixes

  • System messages now preserve line breaks and wrap long text to prevent overflow.

• Style

  • Improved readability of system messages with consistent spacing and text-wrapping.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3f635de

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

Added inline styling to the system message container to preserve whitespace and enable word-wrapping; the message content rendering remains unchanged and still uses messageType.text(t, message).

Changes

Cohort / File(s)	Summary of Changes
System message styling apps/meteor/client/components/message/variants/SystemMessage.tsx	Added inline styles to the system message container: whiteSpace: 'pre-wrap' and overflowWrap: 'break-word' (word-wrapping/whitespace preservation). No change to the message text source or translation call (messageType.text(t, message)).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A hop, a wrap, a tidy line,
My whiskers twitch — long texts align.
No more ellipses trailing sad,
Words fold gently, neat and glad.
This rabbit cheers: "Now everything's fine!" 🐇✨

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 pull request title "fix: enable text wrapping for omnichannel transfer comments in system messages" directly aligns with the main change in the changeset. The title clearly identifies the purpose (enable text wrapping), the specific context (omnichannel transfer comments), and the scope (system messages). The change implements inline styling to the MessageSystemBody component with whiteSpace and overflowWrap properties, which directly fulfills what the title describes. The title is concise, specific, and avoids vague language or noise.
Linked Issues Check	✅ Passed	The pull request directly addresses the primary objective of linked issue #26723, which requires that omnichannel transfer comment text wrap to multiple lines instead of being truncated. The code change adds inline styling with whiteSpace: 'pre-wrap' and overflowWrap: 'break-word' to the MessageSystemBody component, which implements the necessary CSS properties to enable text wrapping. The root cause identified in the PR objectives—that MessageSystemBody lacked CSS properties for proper text wrapping—is directly resolved by this change. The implementation aligns with the expected behavior stated in the issue: transfer comment text is now wrapped to multiple lines as needed.
Out of Scope Changes Check	✅ Passed	All changes in this pull request are directly scoped to addressing the text wrapping issue for omnichannel transfer comments in system messages. The modification is limited to a single file (SystemMessage.tsx) with an inline style addition to the MessageSystemBody component. No logic changes, content modifications, or unrelated alterations are present. The PR summary confirms that no translation key usage was changed and no exported entities were altered, keeping the change minimal and focused. The styling properties added directly correspond to the root cause and the objective defined in linked issue #26723.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent 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 609aab3 and 3f635de.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

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

🧹 Nitpick comments (1)

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

93-93: Remove redundant wordWrap property.

The wordWrap property is deprecated and redundant since overflowWrap: 'break-word' already provides the same functionality with the modern CSS property.

Apply this diff to remove the redundant property:

-<MessageSystemBody data-qa-type='system-message-body' style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', overflowWrap: 'break-word' }}>
+<MessageSystemBody data-qa-type='system-message-body' style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>

📜 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 f627e67 and 609aab3.

📒 Files selected for processing (1)

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