[Due for payment 2026-10-12] RHP - System message is truncated

@mallenexpensify

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

Version Number: 9.4.64-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/71348312/folder/13176908/108356995/1706604116?status_id=1014144&issue_type=jira&sort=%2Bidentifier
Email or phone of affected tester (no customers): expensifail account
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Ventura / Chrome
App Component: Other

Action Performed:

Precondition: use account that never used Accounting before.

Create workpace >enable Accounting
Connect QBO
Make sure Auto-create entities is disabled (in Advanced)
Go to ws chat > create expense
Subit > Approve > Pay
Open expense report

Expected Result:

System message about failure is fit the RHP tab

Actual Result:

System message about failure is truncated in the RHP tab

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug7247269_1788179860663.REC-20260831151100.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7247269

Issue Owner

Current Issue Owner: @mallenexpensify

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/c9002008d73d3760a1b47264583c7898f41adb5cd05a4e196dc7d1a70e9266e4

Proposal

⚠️ Code location is confirmed; the exact CSS mechanism is not runtime-verified — see "What I could not verify" below.

What is the root cause of that problem?

The QBO sync-failure system message is rendered through RenderHTML as <comment><muted-text>…</muted-text></comment>, which bypasses the wrapping styles every other chat message gets.

src/pages/inbox/report/actionContents/IntegrationSyncFailedMessage.tsx:49

<ReportActionItemBasicMessage message="">
    <RenderHTML html={`<comment><muted-text>${message}</muted-text></comment>`} />
</ReportActionItemBasicMessage>

Because message is passed as "", the content goes in via {children} and never touches the styles.chatItemMessage Text branch of ReportActionItemBasicMessage.tsx:28-40. That matters, because those two style sets differ exactly where it counts:

	`maxWidth: 100%`	`wordBreak: break-word`
`chatItemMessage` (plain-text path)	✅	✅
`webViewStyles.baseFontStyle` (RenderHTML path)	❌	❌

The <muted-text> block wrapper then shrink-wraps to its content width. This is a known behaviour already documented in this repo, in the workaround written for Concierge tables — RenderCommentHTML.tsx:26-28:

…must be measured above react-native-render-html's per-block wrappers because those shrink-wrap to their content.

Why only the RHP. The wide RHP is a fixed two-column layout: a hard-width receipt pane plus a message column pinned to variables.sideBarWidth (375px), and that column is wrapped in styles.overflowHidden — MoneyRequestReportView.tsx:259-296. After chat-item padding and the avatar that leaves roughly 283px of text width. So the same message that merely looks wide in the central pane gets clipped in the RHP. The reported repro (one expense) sets shouldShowWideRHPReceipt true at line 175, which is what squeezes the column.

Two things make this message longer than other system messages: the copy interpolates QBO's raw errorMessage verbatim, and it embeds an inline <a>:

en.ts:9737-9738

`there was a problem syncing with ${label}${errorMessage ? ` ("${errorMessage}")` : ''}. Please fix the issue in <a href="${workspaceAccountingLink}">workspace settings</a>.`

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

Give the RenderHTML path the wrapping styles it is missing. Add maxWidth: '100%' and wordBreak: break-word to webViewStyles.baseFontStyle (src/styles/index.ts:263-271), matching what chatItemMessage already declares. This fixes every <comment><muted-text> system message at once, not just QBO.
Constrain the block wrapper. Wrap the RenderHTML in IntegrationSyncFailedMessage in a <View style={styles.w100}>, reusing the pattern already proven in RenderCommentHTML.tsx:33-40. If (1) alone is enough, skip this.

Do step 1 first and re-test; it is the smaller, broader change.

Please verify the fix against the other system messages built the same way, since they share the defect: COMPANY_CARD_CONNECTION_BROKEN, PLAID_BALANCE_FAILURE, TaskAction, MovedTransactionAction, UnreportedTransactionAction, CreateHarvestReportAction.

What I could not verify (please confirm before implementing)

Runtime verification was blocked. The web test session came up on a blank page (0 accessibility nodes, unresponsive) and could not be driven, so I have no DOM measurement. Overall tester result: fail — no test steps ran.

The single check that would settle this: in the 375px RHP message column, inspect the rendered <comment> and <muted-text> divs and read their computed width vs scrollWidth and max-width. That separates the three candidates:

Missing wordBreak: break-word on baseFontStyle — an unbreakable token in QBO's raw errorMessage (entity name, GUID, URL) overflows.
<muted-text> laying out at max-content because maxWidth: 100% fails to resolve against a definite containing block.
The inline <a> rendering as a Pressable + Tooltip box inside the line flow (BaseAnchorForCommentsOnly.tsx:67-124) — a line-breaking hazard right where the string is cut.

Also worth checking: does the repro action carry reasoning? If yes it renders via ReportActionItemMessageWithExplain.tsx:86-92, which passes onLinkPress and therefore mounts a nested RenderHTMLConfigProvider at RenderHTML.tsx:96-104. That provider replaces rather than merges the ambient config, so defaultViewProps (including styles.mw100) from BaseHTMLEngineProvider.tsx:266 is silently dropped. The two branches wrap differently — that is a real latent bug regardless of this issue.

Ruled out, so nobody re-checks:

No numberOfLines / ellipsizeMode anywhere in this render chain.
whiteSpace: 'pre' on the <comment> element model is a @native-html/css-processor webTextFlow property used for whitespace collapsing; it never reaches the DOM as CSS, so it does not disable wrapping.
contentWidth={windowWidth * 0.8} at RenderHTML.tsx:91 only feeds image/embed sizing, so it cannot truncate text — but it is still the wrong basis for RHP content.
For a single-transaction report the RHP uses the same ReportActionsList → ReportActionItem chain as the full-width view. There is no RHP-specific report-action renderer, so "the RHP styles system messages differently" is not the cause — only the available width differs.

Related work

A quick scan of open Expensify/App issues found no duplicate or closely related report.

Same family of bug, worth a separate look: MoneyRequestReportTransactionList.tsx:546-548 decides shouldScrollHorizontally by comparing content width against windowWidth rather than the RHP container width, so content too wide for the RHP is never detected. Both cases come from the same root habit — RHP-local width is never measured.

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/99937) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

view run

@Krishna2323

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

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

@Krishna2323

@Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

@Krishna2323

@Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

@Krishna2323

@Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

Reviewing...

@mallenexpensify

Triggered auto assignment to @mallenexpensify (Awaiting Payment)

@mukhrr

Payment Summary

Resolving PRs:

Give HTML system messages the wrapping styles the text branch already has #102382
Reviewer: @mukhrr owed $175 via NewDot
Reviewer: @Krishna2323 owed $175 via NewDot

BugZero Checklist (@mallenexpensify)

I have confirmed assignees, roles, and Upwork contracts look correct
I have paid out Upwork contracts / manual NewDot requests
[BugZero Assignee] I have created a GH issue for creating/updating the regression test once above steps have been agreed upon

This is due $250

BugZero Checklist:

[Contributor] The offending PR and associated issue have been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to the comment on the PR: No offending PR here. The HTML branch of ReportActionItemBasicMessage never had wrapping styles, so this was a latent bug.
Link to the comment on the Issue: N/A
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue: https://github.com/Expensify/Expensify/issues/691868

Regression Test Proposal

Precondition:

An account that has never used Accounting, a QuickBooks Online company in which the submitter's email does not already exist as a vendor, and a desktop window at least 1280px wide.

Test:

Create a workspace and enable Accounting under More features.
Connect QuickBooks Online and wait for the first sync to finish.
In Accounting > Advanced, turn off Auto-create entities.
Open the workspace chat and create one expense.
Submit the report, approve it, then pay it.
Open that report from Reports so it opens in the right-hand pane next to the receipt.
Scroll to the export failure system message and verify the whole message is readable, with the long email address wrapping onto the next line instead of being cut off at the right edge of the column.

Do we agree 👍 or 👎

Zapier Logs

Run ID: 00040eee-69ad-a1e1-8788-d847d39060f4

@mukhrr

Payment Summary

Contributor: @mukhrr due $250 via NewDot
Contributor+: @Krishna2323 due $250 via NewDot

@Krishna2323

@Krishna2323 was there a reason you didn't add 🆘 snippet to make Help Wanted after Melvin's proposal didn't work? In a perfect world, that would be the process. Currently we want to be careful about hiring Contributors on issues without Help Wanted. Thx

@mallenexpensify

@mallenexpensify I explained my reasoning in this comment. Since mukhrr's solution was working, I thought adding Help Wanted at that point wasn't worthwhile. I'll make sure to add it in similar cases going forward if thats a must before assigning a contributor.

@mukhrr

Approved: @mukhrr due $250 via NewDot

@Krishna2323

Approved @Krishna2323 $250 New Expensify

Navigation Menu

Repository navigation

[Due for payment 2026-10-12] RHP - System message is truncated #99937

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

What is the root cause of that problem?

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

36 remaining items

Payment Summary

BugZero Checklist (@mallenexpensify)

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2026-10-12] RHP - System message is truncated #99937

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

applause-bot commented on Aug 31, 2026

MelvinBot commented on Aug 31, 2026

Proposal

What is the root cause of that problem?

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

melvin-bot commented on Aug 31, 2026

melvin-bot commented on Aug 31, 2026

melvin-bot commented on Sep 3, 2026

melvin-bot commented on Sep 4, 2026

melvin-bot commented on Sep 4, 2026

Krishna2323 commented on Sep 4, 2026

36 remaining items

melvin-bot commented on Oct 11, 2026

melvin-bot commented on Oct 11, 2026

Payment Summary

BugZero Checklist (@mallenexpensify)

mukhrr commented on Oct 11, 2026

Krishna2323 commented on Oct 13, 2026

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

mallenexpensify commented on Oct 14, 2026

Payment Summary

mallenexpensify commented on Oct 14, 2026

Krishna2323 commented on Oct 14, 2026

flaviadefaria commented on Oct 16, 2026

laurenreidexpensify commented on Oct 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions