[Due for payment 2025-08-22] [$250] IOU - Username text overflows the report overview frame

[nlemma]

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.88-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-81/folder/13177049/41237813/822778794
Email or phone of affected tester (no customers): ndk.2303+approver@gmail.com, duytestnguyen+employee@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 11/iOS 18.5
App Component: Money Requests

Action Performed:

Preconditions: Edit account A's and account B's display name to be a very long one, around 3 words for each name.

1. Account A, create an IOU to account B
2. Account B, create an IOU to account A
3. Navigate to the 1:1 Conversation between A and B

Expected Result:

The username text should be wrapped and fit in the report overview frame

Actual Result:

The username texts are overflowing the report overview frame

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

Bug6907946_1754364269073.username_text_overflow_the_report_overview_frame.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

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

Issue Owner

Current Issue Owner: @kadiealexander

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

[drminh2807]

Proposal

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

IOU - Username text overflows the report overview frame

What is the root cause of that problem?

UserInfoCellsWithArrow use 2 items with mw50 and arrow so it will over flow

App/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx

Line 53 in 2ba0052

containerStyle={[styles.mw50, fromRecipientStyle]}

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

If shouldShowToRecipient we should use styles.flex1 instead

            <UserInfoCell
                containerStyle={[shouldShowToRecipient ? styles.flex1 : styles.mw50, fromRecipientStyle]}
            />
            {shouldShowToRecipient && (
                <>
                    <Icon
                        src={Expensicons.ArrowRightLong}
                        width={variables.iconSizeXXSmall}
                        height={variables.iconSizeXXSmall}
                        fill={theme.icon}
                        testID="ArrowRightLong Icon"
                    />
                    <UserInfoCell
                        containerStyle={[styles.flex1, fromRecipientStyle]}
                    />
                </>

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[nkdengineer]

Proposal

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

The username texts are overflowing the report overview frame

What is the root cause of that problem?

if the username is very long, we are setting 2 div with max width is 50% here

App/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx

Lines 46 to 72 in 557e520

	<UserInfoCell
	accountID={participantFrom.accountID}
	avatar={participantFrom.avatar}
	displayName={participantFromDisplayName}
	avatarSize={avatarSize}
	textStyle={infoCellsTextStyle}
	avatarStyle={infoCellsAvatarStyle}
	containerStyle={[styles.mw50, fromRecipientStyle]}
	/>
	{shouldShowToRecipient && (
	<>
	<Icon
	src={Expensicons.ArrowRightLong}
	width={variables.iconSizeXXSmall}
	height={variables.iconSizeXXSmall}
	fill={theme.icon}
	testID="ArrowRightLong Icon"
	/>
	<UserInfoCell
	accountID={participantTo.accountID}
	avatar={participantTo.avatar}
	displayName={participantToDisplayName}
	avatarSize={avatarSize}
	textStyle={infoCellsTextStyle}
	avatarStyle={infoCellsAvatarStyle}
	containerStyle={[styles.mw50, fromRecipientStyle]}
	/>

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

We should wrap 2 UserInfoCell in styles.flex1 both here and here

            <View style={[styles.flex1, styles.flexShrink1, fromRecipientStyle]}>
                <UserInfoCell
                    accountID={participantFrom.accountID}
                    avatar={participantFrom.avatar}
                    displayName={participantFromDisplayName}
                    avatarSize={avatarSize}
                    textStyle={infoCellsTextStyle}
                    avatarStyle={infoCellsAvatarStyle}
                />
            </View>

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.

[Krishna2323]

Proposal

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

IOU - Username text overflows the report overview frame

What is the root cause of that problem?

• Both containers of UserInfoCell uses mw50
  

  App/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx

  Lines 45 to 75 in 557e520

  	<View style={[styles.flex1, style]}>
  	<UserInfoCell
  	accountID={participantFrom.accountID}
  	avatar={participantFrom.avatar}
  	displayName={participantFromDisplayName}
  	avatarSize={avatarSize}
  	textStyle={infoCellsTextStyle}
  	avatarStyle={infoCellsAvatarStyle}
  	containerStyle={[styles.mw50, fromRecipientStyle]}
  	/>
  	{shouldShowToRecipient && (
  	<>
  	<Icon
  	src={Expensicons.ArrowRightLong}
  	width={variables.iconSizeXXSmall}
  	height={variables.iconSizeXXSmall}
  	fill={theme.icon}
  	testID="ArrowRightLong Icon"
  	/>
  	<UserInfoCell
  	accountID={participantTo.accountID}
  	avatar={participantTo.avatar}
  	displayName={participantToDisplayName}
  	avatarSize={avatarSize}
  	textStyle={infoCellsTextStyle}
  	avatarStyle={infoCellsAvatarStyle}
  	containerStyle={[styles.mw50, fromRecipientStyle]}
  	/>
  	</>
  	)}
  	</View>

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

• We should update both mw50 to flex1. here and here.

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

N/A

What alternative solutions did you explore? (Optional)

• If we don't want to set fixed width to the user cell info then we would need to remove styles.mw50 from both UserInfoCell and add styles.flexShrink1 in place of that.
• NOTE: Adding styles.flexShrink1 with styles.mw50 will cause issues like shown below, the second UserInfoCell will not take the remaining space if it is available.

Result

[bernhardoj]

Proposal

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

IOU user info sender and receiver text overflows.

What is the root cause of that problem?

The text is very long and we only set the max width to be 50%.

App/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx

Lines 45 to 74 in 5c79384

	<View style={[styles.flex1, style]}>
	<UserInfoCell
	accountID={participantFrom.accountID}
	avatar={participantFrom.avatar}
	displayName={participantFromDisplayName}
	avatarSize={avatarSize}
	textStyle={infoCellsTextStyle}
	avatarStyle={infoCellsAvatarStyle}
	containerStyle={[styles.mw50, fromRecipientStyle]}
	/>
	{shouldShowToRecipient && (
	<>
	<Icon
	src={Expensicons.ArrowRightLong}
	width={variables.iconSizeXXSmall}
	height={variables.iconSizeXXSmall}
	fill={theme.icon}
	testID="ArrowRightLong Icon"
	/>
	<UserInfoCell
	accountID={participantTo.accountID}
	avatar={participantTo.avatar}
	displayName={participantToDisplayName}
	avatarSize={avatarSize}
	textStyle={infoCellsTextStyle}
	avatarStyle={infoCellsAvatarStyle}
	containerStyle={[styles.mw50, fromRecipientStyle]}
	/>
	</>
	)}

However, the user info cells have an arrow and an 8px gap, so even 50% max width won't prevent the overflow.

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

We need to set flex shrink 1 to the user info cell so it shrinks based on available spaces.

containerStyle={[styles.mw50, styles.flexShrink1, fromRecipientStyle]}

(if we use flex1, the text will grow to fill available spaces)

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

N/A

[melvin-bot]

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

[melvin-bot]

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