fix(ui): prevent message overflow and ensure proper text wrapping in chat UI

[thekailashparihar]

Problem

Long text such as URLs, email addresses, and continuous strings without spaces was not wrapping correctly in chat messages and omnichannel transfer comments. This caused the message container to overflow and break the layout, especially in thread previews and omnichannel transfer scenarios.

Related issue: #26723

---

Solution

• Enabled proper text wrapping using:
  • overflow-wrap: break-word
  • word-break: break-word
• Disabled line clamping to ensure full content visibility:
  • Removed -webkit-line-clamp behavior
  • Set overflow to visible where necessary
• Ensured consistent rendering across:
  • Chat messages
  • Thread preview
  • Omnichannel transfer comments

---

Testing

The fix was verified with the following cases:

• Long continuous strings without spaces
• Long URLs
• Long email addresses

In all scenarios, text wraps correctly within the container without breaking the layout.

---

Notes

• Changes are limited to message rendering styles
• No impact on unrelated components

Summary by CodeRabbit

• Style
  • Enhanced message display styling to ensure long, unbroken text wraps correctly and remains fully visible within its container, preventing unwanted text overflow and truncation in message threads.

[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.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d0c8df3

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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3f5ce07e-9cff-47a1-8065-edee6c37a444

📥 Commits

Reviewing files that changed from the base of the PR and between 4235cd9 and d0c8df3.

📒 Files selected for processing (2)

• apps/meteor/client/startup/startup.ts
• apps/meteor/client/styles/custom.css

📜 Recent review details

⏰ 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 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/startup/startup.ts

🧠 Learnings (7)

📓 Common learnings

Learnt from: ggazzo
Repo: RocketChat/Rocket.Chat PR: 35995
File: apps/meteor/app/api/server/v1/rooms.ts:1107-1112
Timestamp: 2026-02-23T17:53:18.785Z
Learning: In Rocket.Chat PR reviews, maintain strict scope boundaries—when a PR is focused on a specific endpoint (e.g., rooms.favorite), avoid reviewing or suggesting changes to other endpoints that were incidentally refactored (e.g., rooms.invite) unless explicitly requested by maintainers.

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 38493
File: apps/meteor/tests/e2e/page-objects/fragments/home-content.ts:60-82
Timestamp: 2026-02-24T19:36:55.089Z
Learning: In RocketChat/Rocket.Chat e2e tests (apps/meteor/tests/e2e/page-objects/fragments/home-content.ts), thread message preview listitems do not have aria-roledescription="message", so lastThreadMessagePreview locator cannot be scoped to messageListItems (which filters for aria-roledescription="message"). It should remain scoped to page.getByRole('listitem') or mainMessageList.getByRole('listitem').

📚 Learning: 2026-02-25T20:10:16.987Z

Learnt from: ahmed-n-abdeltwab
Repo: RocketChat/Rocket.Chat PR: 38913
File: packages/ddp-client/src/legacy/types/SDKLegacy.ts:34-34
Timestamp: 2026-02-25T20:10:16.987Z
Learning: In the RocketChat/Rocket.Chat monorepo, packages/ddp-client and apps/meteor do not use TypeScript project references. Module augmentations in apps/meteor (e.g., declare module 'rocket.chat/rest-typings') are not visible when compiling packages/ddp-client in isolation, which is why legacy SDK methods that depend on OperationResult types for OpenAPI-migrated endpoints must remain commented out.

Applied to files:

• apps/meteor/client/startup/startup.ts

📚 Learning: 2026-02-10T16:32:42.586Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.

Applied to files:

• apps/meteor/client/startup/startup.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.

Applied to files:

• apps/meteor/client/startup/startup.ts

📚 Learning: 2026-02-26T19:25:44.063Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.

Applied to files:

• apps/meteor/client/startup/startup.ts

📚 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/client/styles/custom.css

📚 Learning: 2026-02-24T19:36:55.089Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 38493
File: apps/meteor/tests/e2e/page-objects/fragments/home-content.ts:60-82
Timestamp: 2026-02-24T19:36:55.089Z
Learning: In RocketChat/Rocket.Chat e2e tests (apps/meteor/tests/e2e/page-objects/fragments/home-content.ts), thread message preview listitems do not have aria-roledescription="message", so lastThreadMessagePreview locator cannot be scoped to messageListItems (which filters for aria-roledescription="message"). It should remain scoped to page.getByRole('listitem') or mainMessageList.getByRole('listitem').

Applied to files:

• apps/meteor/client/styles/custom.css

🔇 Additional comments (3)

apps/meteor/client/startup/startup.ts (1)

12-13: Good integration point for global style override.

Importing the stylesheet in startup is a clean way to apply the wrapping fix without changing runtime logic.

apps/meteor/client/styles/custom.css (2)

40-45: Clamp reset matches the stated UI goal.

Disabling clamp here is consistent with the requirement to avoid truncation/overflow artifacts in previews/comments.

---

14-21: No changes needed. The CSS rule correctly uses white-space: normal for its intended purpose: enabling text wrapping of long unbroken tokens (URLs, emails, etc.).

User-entered newlines are converted to <br> HTML elements by the markdown parser (MarkdownText component with document variant), not through CSS white-space handling. The <br> tags force line breaks regardless of the white-space property value, so white-space: normal does not collapse them.

The suggested change to white-space: pre-wrap would preserve all whitespace characters (spaces, tabs) in the source, which would likely break normal message formatting rather than improve it. The current CSS solution is technically sound and properly addresses the documented problem of long unbroken text not wrapping in message containers.

			> Likely an incorrect or invalid review comment.

---

Walkthrough

A new CSS file is added to fix text wrapping and overflow behavior for message UI elements, and is imported during client startup to apply these styles globally without modifying runtime logic.

Changes

Cohort / File(s)	Summary
Client Startup CSS Import apps/meteor/client/startup/startup.ts	Added import statement to load custom CSS styles during client initialization.
Message Text Wrapping Styles apps/meteor/client/styles/custom.css	New CSS file with rules to force text wrapping via white-space: normal, word-break: break-word, and overflow-wrap: break-word for message body elements; removes line-clamping from .rcx-message-body--clamp class and overrides overflow to visible.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding CSS rules to prevent message overflow and ensure proper text wrapping in the chat UI, which directly matches the modifications to custom.css and the startup import.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.5.0)

apps/meteor/client/styles/custom.css

ConfigurationError: Could not find "stylelint-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at toAbsolutePath (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:169:11)
at Array.map ()
at absolutizePaths (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:176:44)
at augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:83:9)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:204:19)

---

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.}

[cubic-dev-ai]

No issues found across 2 files

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d0c8df3b2c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Scope clamp override to thread preview only

This rule removes clamping for every MessageBody that uses the shared .rcx-message-body--clamp class, not just thread preview, because line-clamp/-webkit-line-clamp are unset with !important globally. Components that intentionally rely on MessageBody clamp={2} (for example apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx:71 and apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx:61) will now render full text, which can make long messages expand list rows and degrade the contextual bar layout.

Useful? React with 👍 / 👎.

[thekailashparihar]

Thanks for the review.

You're right — the current implementation removes clamping globally, which may affect components relying on it.

I will update the selector to scope the override specifically to thread preview components to avoid unintended side effects.