[$250] Expense - Chat bubble is partially hidden in expense with long violation message in reports page

[vincdargento]

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: V9.1.59-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): Slottwo1 8y65@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings
3. Enable tags and in settings enable members must tag expenses
4. Tap overview and change to control workspace
5. Open workspace chat
6. Create a manual expense with big amount, without selecting category, tag & select future date.
7. Create another expense as in step 6
8. Open reports page
9. Note chat bubble button

Expected Result:

Chat bubble must not be hidden in expense with long violation message in reports page

Actual Result:

Chat bubble is partially hidden in expense with long violation message in reports page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021930820978543524621
• Upwork Job ID: 1930820978543524621
• Last Price Increase: 2025-06-06

Issue Owner

Current Issue Owner: @QichenZhu

[melvin-bot]

Triggered auto assignment to @kadiealexander (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.

[etCoderDysto]

Proposal

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

Chat bubble is partially hidden in expense with long violation message in reports page

What is the root cause of that problem?

We use styles.mw100 to prevent the error message from overflowing the parent component. And the error message takes up the whole space when the error message is long.

App/src/components/TransactionItemRow/index.tsx

Lines 313 to 335 in 4db0fc1

	<View style={[styles.flexColumn, styles.mw100]}>
	{hasCategoryOrTag && (
	<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.mt3]}>
	<CategoryCell
	transactionItem={transactionItem}
	shouldShowTooltip={shouldShowTooltip}
	shouldUseNarrowLayout={shouldUseNarrowLayout}
	/>
	<TagCell
	transactionItem={transactionItem}
	shouldShowTooltip={shouldShowTooltip}
	shouldUseNarrowLayout={shouldUseNarrowLayout}
	/>
	</View>
	)}
	<TransactionItemRowRBR
	transaction={transactionItem}
	containerStyles={[styles.mt3]}
	/>
	</View>
	<ChatBubbleCell
	transaction={transactionItem}
	containerStyles={[styles.mt3]}

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

We should use styles.flex1 instead to make a room for ChatBubbleCell. We should make similar changes on other places if the issue happens.

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

none - UI issue

What alternative solutions did you explore? (Optional)

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-05 16:37:08 UTC.

Proposal

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

Chat bubble is partially hidden in expense with long violation message in reports page.

What is the root cause of that problem?

we are using max width 100% in here

App/src/components/TransactionItemRow/index.tsx

Line 313 in 4db0fc1

<View style={[styles.flexColumn, styles.mw100]}>

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

We should remove this styles.mw100 and use styles.flex1 and add the margin-right styles.mr2

Or we can change the max width of the RBR that we can ask the designer here

Note: we can check other places if it also happens

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[kaushiktd]

The issue is not reproducible with latest commit. There is a condition that checks the threadMessages count here — if the count is greater than 0, the chat bubble is shown; otherwise, it is not.

Alternatively, if this condition is removed, the chat bubble will always be shown, and the long violation message appears properly formatted. You can check here with-condition or without-condition.

[melvin-bot]

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