[HOLD for payment 2024-12-30] [$125] Android & iOS - Review duplicates - Confirm button has extra bottom padding on confirm 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: 9.0.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh1311020@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Launch ND or hybrid app.
2. Go to workspace chat.
3. Submit two expenses of the same amount.
4. Go to transaction thread of any expense.
5. Tap Review duplicates.
6. Tap Keep this on (any expense).
7. Go through the flow and proceed to confirmation page.

Expected Result:

Confirm button will not have extra bottom padding.

Actual Result:

Confirm button has extra bottom padding.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867335169078462217
• Upwork Job ID: 1867335169078462217
• Last Price Increase: 2024-12-12

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-05 23:29:33 UTC.

Proposal

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

Android & iOS - Review duplicates - Confirm button has extra bottom padding on confirm page

What is the root cause of that problem?

We haven't set includeSafeAreaPaddingBottom to false on the screenwrapper so it will be true by default

App/src/pages/TransactionDuplicate/Confirmation.tsx

Lines 93 to 94 in 48b80f6

	<ScreenWrapper
	testID={Confirmation.displayName}

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

            includeSafeAreaPaddingBottom={false}

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

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

There is extra bottom spaces in review duplicate transaction page.

What is the root cause of that problem?

The safe area padding-bottom is applied twice.

App/src/pages/TransactionDuplicate/Confirmation.tsx

Lines 93 to 99 in 3baf965

	<ScreenWrapper
	testID={Confirmation.displayName}
	shouldShowOfflineIndicator
	>
	{({safeAreaPaddingBottomStyle}) => (
	<FullPageNotFoundView shouldShow={shouldShowNotFoundPage}>
	<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>

Once from inside the ScreenWrapper itself, and once from the safeAreaPaddingBottomStyle that we consume and apply to the View as shown above.

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

Remove the safeAreaPaddingBottomStyle. This makes the code simpler too.

<ScreenWrapper
    testID={Confirmation.displayName}
    shouldShowOfflineIndicator
>
    <FullPageNotFoundView shouldShow={true}>
        <View style={styles.flex1}>

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

N/A, it's a visual UI issue.

[melvin-bot]

@slafortune Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@slafortune Eep! 4 days overdue now. Issues have feelings too...

[slafortune]

Checking on this https://expensify.slack.com/archives/C01SKUP7QR0/p1734039216754849

[melvin-bot]

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