[$250] Account setting - Avatar error message is not aligned to the avatar or save button

[jponikarchuk]

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.2.38-1
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/folder/13176687/test-cases/41236651
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome, Samsung Galaxy S10 Chrome, Samsung Galaxy S10 Android 12
App Component: User Settings

Action Performed:

1. Navigate to staging.new.expensify.com
2. Go to profile and add an image more than 6mb

Expected Result:

The error message should be aligned at the bottom or placed directly under the avatar, so it can be seen without scrolling.

Actual Result:

The error message appears under the custom avatars section, which makes it confusing to understand the reason for the avatar upload failure until you scroll down.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021985193795010379547
• Upwork Job ID: 1985193795010379547
• Last Price Increase: 2025-11-03

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Account setting - Avatar error message is not aligned to the avatar or save button

What is the root cause of that problem?

We define the error inside the scrollview

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 284 to 291 in 2b89b1c

	{!!errorData.validationError && (
	<DotIndicatorMessage
	style={styles.mt6}
	// eslint-disable-next-line @typescript-eslint/naming-convention
	messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
	type="error"
	/>
	)}

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

We should move the error message directly under the avatar section for better visibility

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 266 in 2b89b1c

</AttachmentPicker>

or

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Line 229 in 2b89b1c

</AvatarCapture>

We can also adjust the padding horizontal for the error to fix this issue

                {!!errorData.validationError && (
                    <DotIndicatorMessage
                        style={[styles.mt3, styles.ph5]}
                        // eslint-disable-next-line @typescript-eslint/naming-convention
                        messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
                        type="error"
                    />
                )}

What alternative solutions did you explore? (Optional)

None

[daledah]

Proposal

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

The error message appears under the custom avatars section, which makes it confusing to understand the reason for the avatar upload failure until you scroll down.

What is the root cause of that problem?

We define the error in sthe croll view

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 284 to 291 in 2b89b1c

	{!!errorData.validationError && (
	<DotIndicatorMessage
	style={styles.mt6}
	// eslint-disable-next-line @typescript-eslint/naming-convention
	messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
	type="error"
	/>
	)}

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

We should move it to FixedFooter

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 294 to 303 in 2b89b1c

	<FixedFooter style={styles.mtAuto}>
	<Button
	large
	success
	text={translate('common.save')}
	isDisabled={!isDirty}
	onPress={onPress}
	pressOnEnter
	/>
	</FixedFooter>

            <FixedFooter style={styles.mtAuto}>
                {!!errorData.validationError && (
                    <DotIndicatorMessage
                        style={[styles.ph5, styles.mv3]}
                        // eslint-disable-next-line @typescript-eslint/naming-convention
                        messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
                        type="error"
                    />
                )}
                <Button

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]

📣 @samarroy84! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[paulnjs]

Proposal

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

The error message appears under the custom avatars section, which makes it confusing to understand the reason for the avatar upload failure until you scroll down.

What is the root cause of that problem?

The avatar error is grouping inside the ScrollView

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 284 to 291 in 2b89b1c

	{!!errorData.validationError && (
	<DotIndicatorMessage
	style={styles.mt6}
	// eslint-disable-next-line @typescript-eslint/naming-convention
	messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
	type="error"
	/>
	)}

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

If we want to avatar be aligned at the bottom, we should group error and submit button with FormAlertWithSubmitButton and remove these lines

<FixedFooter style={styles.mtAuto}>
    <FormAlertWithSubmitButton
        buttonText={translate('common.save')}
        isDisabled={!isDirty}
        onSubmit={onPress}
        message={errorData.validationError ? translate(errorData.validationError, errorData.phraseParam as never) : undefined}
        isAlertVisible={!!errorData.validationError}
    />
</FixedFooter>

App/src/pages/settings/Profile/Avatar/AvatarPage.tsx

Lines 284 to 291 in 2b89b1c

	{!!errorData.validationError && (
	<DotIndicatorMessage
	style={styles.mt6}
	// eslint-disable-next-line @typescript-eslint/naming-convention
	messages={{0: translate(errorData.validationError, errorData.phraseParam as never)}}
	type="error"
	/>
	)}

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)

NA

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]

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

[melvin-bot]

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