[HOLD #62848][$250] Unnecessary word splitting and line breaks after links in chat

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.72-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @rafecolton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Send a message in chat that includes a link, e.g., "oh weird, why is it breaking to the next line after that link. testing some link that is followed by other text."
2. Resize the chat window to be narrower
3. Observe the behavior of the text wrapping after the link

Expected Result:

The link and surrounding text should wrap cleanly without breaking words mid-way or creating unnatural line breaks.

Actual Result:

Words after the link break onto a new line unnecessarily or are split awkwardly.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021939725757772042583
• Upwork Job ID: 1939725757772042583
• Last Price Increase: 2025-07-07

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MobileMage]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users send messages in chat that contain links followed by additional text, the text after the link breaks to a new line unnecessarily when the chat window is resized to be narrower. This creates poor text flow and readability issues in chat messages.

What is the root cause of that problem?

The root cause is twofold:

1. CSS Display Issue: The styles.dInlineFlex CSS style being applied to the anchor container in AnchorRenderer.tsx. This display: inline-flex property creates a flex formatting context that disrupts natural text flow, causing the text after links to wrap to new lines instead of flowing naturally with the surrounding text content.

2. Non-breaking Space Handling: The current HTML processing replaces spaces with non-breaking spaces ( ), which prevents natural word breaking and contributes to awkward text wrapping behavior.

What changes do you think we should make in order to solve the problem?

1. Remove Inline Flex Display
   Remove the styles.dInlineFlex from the style array in AnchorRenderer.tsx. This will eliminate the display: inline-flex style that's causing the unwanted text wrapping behavior. The component will inherit the natural inline display behavior from its parent container, allowing text to flow naturally while maintaining all other functionality of the link component.

Before:

style={[
  style,
  parentStyle,
  textDecorationLineStyle,
  styles.textUnderlinePositionUnder,
  styles.textDecorationSkipInkNone,
  isChildOfTaskTitle && styles.taskTitleMenuItem,
  styles.dInlineFlex, // Remove this line
]}

After:

style={[
  style,
  parentStyle,
  textDecorationLineStyle,
  styles.textUnderlinePositionUnder,
  styles.textDecorationSkipInkNone,
  isChildOfTaskTitle && styles.taskTitleMenuItem,
  // styles.dInlineFlex removed - inherits natural inline behavior
]}

2. Improve Word Breaking

Address the word splitting issue by modifying the HTML processing logic:

Current implementation:

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, '&nbsp;');

Proposed change:

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, ' ');

Alternative Word Breaking Solution

If maintaining non-breaking spaces is necessary for other functionality, consider using word break opportunities:

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, '&nbsp;<wbr>');

This approach preserves the non-breaking space behavior while providing explicit word break opportunities (<wbr> tags) that allow browsers to break text more intelligently when needed.

word.split.fix.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Test that links in chat messages flow naturally with surrounding text without causing line breaks, verify that link functionality remains intact, and ensure proper text wrapping behavior across different screen sizes and window widths.

What alternative solutions did you explore? (Optional)

Considered replacing styles.dInlineFlex with styles.dInline, but removing the explicit display styling entirely is the cleanest solution that allows the component to inherit natural inline behavior from its parent container while maintaining link functionality and fixing the text flow issue. Also explored the word-breaking solution mentioned above as a complementary approach for fine-tuning text flow behavior.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021939725757772042583

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

[ganzz4]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Text wrapping after links in chat messages behaves incorrectly. When a message contains a link followed by additional text, the text after the link breaks to a new line unnecessarily, even when there is sufficient space on the current line to continue the text flow naturally.

What is the root cause of that problem?

The root cause is twofold:

1. Flex Context Disruption: The styles.dInlineFlex styling applied to the anchor container in AnchorRenderer.tsx creates an inline-flex display context that interferes with normal text flow behavior. This flex formatting context causes the browser to treat the link as a separate block for layout purposes, leading to unnecessary line breaks in the surrounding text content.

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

Lines 136 to 144 in 900489a

	style={[
	style,
	parentStyle,
	textDecorationLineStyle,
	styles.textUnderlinePositionUnder,
	styles.textDecorationSkipInkNone,
	isChildOfTaskTitle && styles.taskTitleMenuItem,
	styles.dInlineFlex,
	]}

2. Space Processing Issue: The HTML processing logic converts regular spaces to non-breaking spaces ( ), which interferes with the browser's natural word wrapping algorithm and creates suboptimal text flow when chat messages are displayed in narrower windows.

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 77 in cec17ac

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, '&nbsp;');

What changes do you think we should make in order to solve the problem?

1. Replace Inline Flex Display: Replace styles.dInlineFlex with styles.dInline for the main anchor container. This change allows links to behave as normal inline elements, preserving natural text flow while maintaining all existing functionality.

Proposed solution:

styles.dInline,

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

Line 143 in 900489a

styles.dInlineFlex,

2. Improve Word Breaking: Additionally, we should address the word splitting issue by modifying the HTML processing logic to allow for more natural text flow:

Current implementation:

App/src/pages/home/report/comment/TextCommentFragment.tsx

Line 77 in cec17ac

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, '&nbsp;');

Proposed change:

const escapedHtml = html.replace(/(?:(?![\n\r])\s)(?![^<]*>)/g, ' ');

This combined approach:

• Fixes the text wrapping issue after links
• Preserves all existing link functionality
• Doesn't introduce any new behaviors or side effects
• Uses existing utility styles from the design system
• Improves overall text flow behavior across different screen sizes

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Basic text wrapping after links test:

• Create a chat message with a link followed by text that should wrap naturally
• Verify that text continues on the same line when there's available space
• Test with various screen widths to ensure consistent behavior
• Verify that link functionality remains intact across different window widths

What alternative solutions did you explore? (Optional)

I initially considered simply removing the styles.dInlineFlex entirely, but replacing it with styles.dInline provides more explicit control while maintaining the intended inline behavior. Complete removal could potentially reintroduce previous bugs that the inline-flex was originally meant to address (see related fix), so using explicit inline styling ensures we maintain stability while fixing the current text wrapping issue.

[ganzz4]

[UPDATED] I've recorded a quick demo video showing the fix in action:

fix.mp4

[sobitneupane]

@MobileMage @ganzz4 Please make sure to follow the contributing guidelines. As per the contributing guidelines, you are required to add a comment notifying that you’ve updated the proposal.