[Due for payment 2025-10-27] [$125] Reports page - Incorrect right padding on selection list rows in the From filter menu

[izarutskaya]

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.2.28-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in
3. Go to Reports page
4. Click on From filter menu

Expected Result:

The checkbox should just be 20px from the right edge.

Actual Result:

The avatar is bigger than it's wrapper, and the checkbox is not over on the right edge.

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

Recording.3446.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021978240290167625454
• Upwork Job ID: 1978240290167625454
• Last Price Increase: 2025-10-14
• Automatic offers:
• nkdengineer | Contributor | 109136377

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[nkdengineer]

Proposal

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

The avatar is bigger than it's wrapper, and the checkbox is not over on the right edge.

What is the root cause of that problem?

We have a margin right as 12px here

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Line 120 in d44598e

style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}

mentionSuggestionsAvatarContainer style has width and height as 24px and avatarSizeSmall has size 28px

App/src/styles/variables.ts

Line 44 in d44598e

avatarSizeSmall: 28,

App/src/styles/index.ts

Lines 336 to 341 in d44598e

	mentionSuggestionsAvatarContainer: {
	width: 24,
	height: 24,
	alignItems: 'center',
	justifyContent: 'center',
	},

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

The checkbox should just be 20px from the right edge.

1. We should remove this margin right if we don't have rightElement

    style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, !!item.rightElement && styles.mr3]}

The avatar is bigger than it's wrapper

2. we should set the size of Avatar as CONST.AVATAR_SIZE.SMALLER or we can set the size of mentionSuggestionsAvatarContainer style to 28px (we can create a new style for this)

    <Avatar
        source={item.icons.at(0)?.source}
        size={CONST.AVATAR_SIZE.SMALLER}
        name={item.icons.at(0)?.name}
        avatarID={item.icons.at(0)?.id}
        type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}
        fallbackIcon={item.icons.at(0)?.fallbackIcon}
    />

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Lines 88 to 95 in d44598e

	<Avatar
	source={item.icons.at(0)?.source}
	size={CONST.AVATAR_SIZE.SMALL}
	name={item.icons.at(0)?.name}
	avatarID={item.icons.at(0)?.id}
	type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}
	fallbackIcon={item.icons.at(0)?.fallbackIcon}
	/>

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.

[paulnjs]

Proposal

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

The avatar is bigger than it's wrapper, and the checkbox is not over on the right edge.

What is the root cause of that problem?

We always set the margin right for the check box here

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Line 120 in d44598e

style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}

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

We should only set the margin-right if the rightElement exists

style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, !!item.rightElement && styles.mr3]}

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Line 120 in d44598e

style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}

Or we can remove the margin-right and add the margin-left to rightElement if it exists

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

undefined

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.

[Eskalifer1]

Proposal

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

Reports page - Incorrect right padding on selection list rows in the From filter menu

What is the root cause of that problem?

The wrap above the avatar has a width and height of 24px, while the avatar itself has a height and width of 28px:

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

There are two ways to solve this:

1. We need to change the width and height of the container to 28px
2. Reduce the avatar from Small to Smaller

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Lines 87 to 96 in d44598e

	<View style={styles.mentionSuggestionsAvatarContainer}>
	<Avatar
	source={item.icons.at(0)?.source}
	size={CONST.AVATAR_SIZE.SMALL}
	name={item.icons.at(0)?.name}
	avatarID={item.icons.at(0)?.id}
	type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}
	fallbackIcon={item.icons.at(0)?.fallbackIcon}
	/>
	</View>

We can do this dynamically if these variables are not needed elsewhere.

Additionally we need to remove marginRight if the rightElement is not exist:

App/src/components/SelectionListWithSections/Search/UserSelectionListItem.tsx

Line 120 in bad2b72

style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}

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)

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.

[Eskalifer1]

Proposal updated!

Added part about checkbox

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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