fix: Allow longer lines in attachments messages #37428

[Layyzyy]

Proposed changes :

This PR increases the allowed line length for text inside message attachments, so lines no longer wrap prematurely on desktop. The previous behavior caused attachment text to break into many short lines.

What I changed :

1. Raised the per-line character/width threshold used by the attachment text renderer.

2. Adjusted the wrapping logic so it’s responsive:

   i . On small screens, lines still wrap conservatively to avoid horizontal scroll.

   ii. On medium/large screens, lines can span more characters before wrapping.

3. Updated styles to respect container width and preserve word breaks/URLs correctly.

4. Added safeguards to avoid overflow and to keep emoji/code spans aligned.

This aligns with the request in the issue “Allow longer lines in attachments messages.”
GitHub

Steps to test or reproduce

Using the REST API, send a message with a long attachments[0].text field (include long words, a URL, and normal prose), for example to a test channel.

View the message on:

1. A mobile-sized viewport (≤ 480–600px wide).

2. A desktop viewport (≥ 1024px wide).

Expected behavior after this PR:

1. On mobile, lines wrap early enough to avoid horizontal scrolling.

2. On desktop, lines are noticeably longer per line (fewer total lines), with no overflow or layout shift.

Screenshots :

Summary by CodeRabbit

• Bug Fixes
  • Message attachments now preserve whitespace and wrap long text more cleanly, improving readability for long messages, code snippets, and pasted content. Line breaks and spacing are retained and overly long words or URLs break appropriately to avoid overflow. No changes to external interfaces or app behavior beyond display improvements.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dc54936

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]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ Layyzyy
❌ Lay Sandeep Shah

---

Lay Sandeep Shah seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

Added inline styles to the AttachmentText component to preserve whitespace and improve wrapping: whiteSpace: 'pre-wrap', wordBreak: 'normal', and overflowWrap: 'anywhere'. No API or exported declarations changed.

Changes

Cohort / File(s)	Change Summary
Attachment text styling apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx	Added inline Box styles: whiteSpace: 'pre-wrap', wordBreak: 'normal', and overflowWrap: 'anywhere' to preserve whitespace and control text wrapping.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file, CSS-only inline style changes
• No logic or API modifications
• Review focus: verify intended wrapping behavior in various text samples and ensure no regressions in layout

Poem

I nibble lines with careful care,
Keep every space that lingers there,
Pre-wrap cradles words that stray,
No odd breaks will lead astray,
A rabbit cheers — the text can play! 🐇✨

Pre-merge checks and finishing touches

✅ 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 clearly describes the main change: allowing longer lines in attachment messages to prevent premature wrapping, which aligns with the code modification that adds CSS styling for better text wrapping behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

📜 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 f03bf2c and 8569d73.

📒 Files selected for processing (1)

• apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx (1 hunks)

🔇 Additional comments (1)

apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx (1)

13-17: Verify aggressive text breaking doesn't damage URLs and code snippets.

The CSS rule overflowWrap: 'anywhere' allows the browser to break lines at any character, which may cause usability issues:

1. URLs — Long URLs might break at confusing points (e.g., https://ex|ample.com/path).
2. Code snippets or identifiers — Breaking mid-token reduces readability.

Note: The presence of both wordBreak: 'break-word' and overflowWrap: 'anywhere' is redundant—in CSS cascade, overflowWrap takes precedence, making break-word ineffective.

Test with:

1. Messages containing long URLs
2. Messages with code blocks or long identifiers
3. Different viewport sizes (mobile, desktop) to confirm behavior

If URLs or code break inappropriately, consider using overflowWrap: 'break-word' alone (breaks only when no other valid break point exists) or applying conditional styles if different content types need different treatment.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx (1)

13-17: Verify responsive wrapping behavior against PR objectives.

The inline styles look appropriate for preventing overflow and allowing wrapping. The previous deprecation issue with wordBreak: 'break-word' has been correctly addressed by using wordBreak: 'normal'.

However, the PR description states:

"Adjusted wrapping logic to be responsive: conservative wrapping on small screens; allowing longer lines on medium/large screens."

The current implementation applies uniform styles regardless of viewport size. There are no media queries or conditional logic to differentiate behavior between mobile (≤480–600px) and desktop (≥1024px) viewports.

Can you clarify how the responsive wrapping behavior is achieved? If the Box component or parent containers handle this automatically, that's fine—but if viewport-specific logic is needed, it may require additional implementation.

Optional: wordBreak: 'normal' is the default value and technically redundant, though keeping it explicit does provide clarity and documents the intent after addressing the deprecation.

📜 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 8569d73 and dc54936.

📒 Files selected for processing (1)

• apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx (1 hunks)