[Hold for #67891] Report - Display name is cutoff by buttons in Report 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.91-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: #66948
Email or phone of affected tester (no customers): ndk.2303+approver@gmail.com
Issue reported by: Applause Internal Team
Device used: Android 16 / Pixel 7A/ Chrome
App Component: Money Requests

Action Performed:

Preconditions: 2 accounts with long display name (which is need be wrapped when shown on report view)

1. Open https://staging.new.expensify.com/
2. Account B creates some expenses that trigger 'View', 'Review', 'Approve' to account A
3. Navigate to Report page in account A

Expected Result:

The display name is shown correctly

Actual Result:

The display name of receiver account is cut off by buttons

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

View all open jobs on GitHub

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

Report - Display name is cutoff by buttons in Report page

What is the root cause of that problem?

When shouldShowToRecipient is true, both UserInfoCell will have 100% width. And the right UserInfoCell will be pushed further right since there is an Icon between them.

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

Lines 45 to 72 in 1d7e6ef

	<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]}
	/>

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

We should pass styles.flex1 to the second UserInfoCell instead of 100% width (fromRecipientStyle) to take only the available space

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

Line 71 in 1d7e6ef

containerStyle={[styles.mw50, fromRecipientStyle]}

containerStyle={styles.flex1}

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

UI issue

What alternative solutions did you explore? (Optional)

[nkdengineer]

Same RCA with #67891

[samranahm]

It will be resolved in #67891

[kadiealexander]

Putting on hold until #67891 is resolved.