[$250] Profile - No spacing between zoom/rotate toolbar & save button in edit photo page

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.36
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com & login
2. Tap on settings top icon
3. Tap on edit icon in avatar >> Tap on Upload photo
4. Upload photo from device gallery or take photo

Expected Result:

There should be enough spacing between zoom/rotate toolbar & save button in edit photo page
Though open app banner is displayed, minimal spacing should be provided between zoom/rotate toolbar & save button

Actual Result:

No spacing between zoom/rotate toolbar & save button in edit photo page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6365508_1706922990967.RPReplay_Final1706892599.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011b1c38630383cb3f
• Upwork Job ID: 1754485497559797760
• Last Price Increase: 2024-02-05

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @amyevans (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

Production:

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[aeioual]

Proposal

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

What is the root cause of that problem?

We don't have enough spacing(padding/margin) between the two components of submit button and crop image

App/src/components/AvatarCropModal/AvatarCropModal.tsx

Lines 389 to 390 in 3ab4e6e

	<PressableWithoutFeedback
	style={[styles.mh5, styles.flex1]}

App/src/components/AvatarCropModal/AvatarCropModal.tsx

Lines 419 to 421 in 3ab4e6e

	<Button
	success
	style={[styles.m5]}

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

With suggestions from the design team, We can allocate the appropriate padding/margin to these components and this bug will be resolved.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Upwork job price has been updated to $150

[melvin-bot]

Upwork job price has been updated to $250

[mountiny]

Not a blocker

@shawnborton could you help us align on the design here please so the proposal can be based on that? thank you!

[Krishna2323]

Proposal

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

Profile - No spacing between zoom/rotate toolbar & save button in edit photo page

What is the root cause of that problem?

In smaller height devices the content overflows and we don't use scroll view. We also need to modify the stylings of button like we do in forms.

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

We need to use ScrollView inside AvatarCropModal.

Result

[shawnborton]

Hmm well this is because the button floats on top of the content behind it. I'm not sure if we actually need to consider this a spacing bug. cc @Expensify/design for thoughts too.

But I think my vote is to just close and do nothing.

[dannymcclain]

But I think my vote is to just close and do nothing.

I'm cool with this—it seems kinda like a pretty weird edge case to me, and it looks like the controls are all still functional.

[dubielzyk-expensify]

I actually think we should tweak this screen to always just be 100% height. In my opinion every element on this screen should have a set/fixed height except for the profile image that should scale to fill the remaining. This would allow all the controls to be visible without having to scroll down.

Sorta like this:

In above I've also fixed the icon button to be using the IconButton component and icon color being icon color instead of white which it is now:

[shawnborton]

Hmm, I'm not sure if I agree with that. On a super short screen, how exactly would the square (with the avatar crop) scale down to be fluid?

I think this should behave like the Profile > Personal Details > Address page where the green button sits at the bottom of the view when there is extra room available but if the content is too tall, we just put the green button below the content. We do this on the profile page, like so:

ProfileSaveButton.mp4

Good catch on the icon color! We should change that.

[dubielzyk-expensify]

Fair enough. I guess I just imagined we scale down the profile picture area like this:

If we don't go with that, then I agree fully with the button being on the bottom of the content. I guess in my head if you can't see the control + profile picture in one screen then that would be weird to me.

[shawnborton]

Ah I see what you are saying. Either way though, I still feel like we can just close this one out and do nothing because the Save button sits on top of the content, and it seems like this case mostly happens when you are viewing on mWeb with the native banner showing?

[dubielzyk-expensify]

Sure thing 👍

[amyevans]

Thanks for the discussion! Closing