[HOLD for payment 2024-12-07] [HOLD for payment 2024-12-05] [$500] Web - Expense - Submit button on confirmation page has extra bottom margin

[IuliiaHerets]

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: 9.0.67-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Go to + > Submit expense > Next.
4. Enter amount > Next.

Expected Result:

Submit button will not have extra bottom margin (production behavior).

Actual Result:

Submit button has extra bottom margin.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6677289_1732647525932.20241127_024755.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[daledah]

Edited by proposal-police: This proposal was edited at 2024-11-26 19:15:53 UTC.

Proposal

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

Submit button has extra bottom margin.

What is the root cause of that problem?

Offending PR: #52392

We have extra styles.mb6 here

App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

Line 609 in 967cc5c

<View style={[styles.flex1, styles.mb6]}>

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

We should remove styles.mb6 in this style

What alternative solutions did you explore? (Optional)

Or we can revert to use safeAreaPaddingBottomStyle from ScreenWrapper

[mountiny]

cc @kirillzyusko

[mountiny]

I think the margin was added to make sure the button is correctly added on android native so we need to make sure it looks fine there too

[mountiny]

Also noting that this does not have to be a blocker, but lets look into trying to fix this while not breaking the native android

I think we should assign @kirillzyusko to look into this as the PR author

[chiragsalian]

Also noting that this does not have to be a blocker, but lets look into trying to fix this while not breaking the native android
I think we should assign @kirillzyusko to look into this as the PR author

I agree with both points.
But can't assign to him just cause he hasn't commented on this issue yet. Hopefully he sees it soon. If not we can just remove the blocker label since its not a significant blocker imo.

[kirillzyusko]

Hey, feel free to assign me 👋

[chiragsalian]

Done 🙂

[kirillzyusko]

We should remove styles.mb6 in this style

On iOS in this case the button will be very close to the bottom of safe area.

Or we can revert to use safeAreaPaddingBottomStyle from ScreenWrapper

On Android with 3 button navigation bar the button will be moved to high from nav bar.

So both proposals will introduce issues on different platforms.

[MariaHCD]

@kirillzyusko could you confirm whether these two deploy blockers (related to the way buttons appear in Android) are also related to this issue?

• [HOLD for payment 2024-12-07] [HOLD for payment 2024-12-05] Android - Group - Start group button on confirmation page has extra bottom margin #53190
• [HOLD for payment 2024-12-07] [HOLD for payment 2024-12-05] Android - Taxes - Save button appears above the keyboard with huge spacing in Name page #53181

[kirillzyusko]

@MariaHCD yes, I think so. Probably all these issues are coming from the fact that edge-to-edge mode has been enabled and because of that some screens may have an incorrect padding or the wrong distance between button and keyboard.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[mountiny]

fixed

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.67-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix: Android edge-to-edge related inset/padding issues #53223

If no regressions arise, payment will be issued on 2024-12-05. 🎊

For reference, here are some details about the assignees on this issue:

• @chrispader does not require payment (Contractor)
• @kirillzyusko does not require payment (Contractor)

[melvin-bot]

@chiragsalian / @mountiny @twisterdotcom @chrispader / @kirillzyusko The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mountiny]

$500 to @allroundexperts for their review on 2 PRs (#53223 & #53250)

No regression test needed as it was a challenging new feature flag for android and these small styling issues are temporary

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.68-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix: Android edge-to-edge related inset/padding issues #53223

If no regressions arise, payment will be issued on 2024-12-07. 🎊

For reference, here are some details about the assignees on this issue:

• @chrispader does not require payment (Contractor)
• @kirillzyusko does not require payment (Contractor)
• @allroundexperts requires payment through NewDot Manual Requests

[melvin-bot]

@allroundexperts @twisterdotcom @allroundexperts The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[allroundexperts]

@mountiny I reviewed two PRs (#53223 & #53250) here. Can you please update the payment summary? 🙇

[mountiny]

Updated

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

[twisterdotcom]

Payment Summary:

• @chrispader does not require payment (Contractor)
• @kirillzyusko does not require payment (Contractor)
• @allroundexperts paid $500 via NewDot Manual Request