Task - No bottom padding for Confirm task button

[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.66-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
   and log in
2. Click on the FAB > Assign task
3. Enter the name of the task and proceed to the next screen

Expected Result:

The bottom padding is present for the Confirm task button as for other buttons

Actual Result:

There is no bottom padding for the Confirm task button

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

Bug6462833_1714137910845.Recording__437.mp4

View all open jobs on GitHub

[melvin-bot]

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

[lanitochka17]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

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

[Krishna2323]

Proposal

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

Task - No bottom padding for Confirm task button

What is the root cause of that problem?

There is no style applied to FormAlertWithSubmitButton for bottom padding/margin.

App/src/pages/tasks/NewTaskPage.tsx

Line 194 in 2487ab7

containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}

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

We need to add padding/margin bottom of styles.mb5 or as per the design. Margin can be applied to parent containers instead of FormAlertWithSubmitButton.

What alternative solutions did you explore? (Optional)

[dragnoir]

Proposal

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

Task - No bottom padding for Confirm task button

What is the root cause of that problem?

includeSafeAreaPaddingBottom missing here

App/src/pages/tasks/NewTaskPage.tsx

Lines 124 to 127 in 0cff26f

	<ScreenWrapper
	shouldEnableKeyboardAvoidingView={false}
	testID={NewTaskPage.displayName}
	>

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

On ScreenWrapper component we have this logic:

App/src/components/Form/FormWrapper.tsx

Line 105 in 0cff26f

style={[style, safeAreaPaddingBottomStyle.paddingBottom ? safeAreaPaddingBottomStyle : styles.pb5]}

This add a styles.pb5 with the props includeSafeAreaPaddingBottom

Solution: we need to add includeSafeAreaPaddingBottom to ScreenWrapper here

<ScreenWrapper
            shouldEnableKeyboardAvoidingView={false}
            testID={NewTaskPage.displayName}
+          includeSafeAreaPaddingBottom
        >

[allgandalf]

@luacmartins , another regression from that extra footer PR #38039. c.c. @lukemorawski

[garrettmknight]

Holding for a fix in #36038

[garrettmknight]

Adding #40827 to the HOLD

[garrettmknight]

Still holding

[luacmartins]

PR has been merged and I think this should be fixed.

[garrettmknight]

All fixed!