[Payment Due 5/23] [$250] Incorrect button bottom spacing on the Request Early Cancellation page.

[m-natarajan]

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.1.33-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @jayeshmangwani
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open the app and go to Settings -> Subscription.
2. If the user has an annual plan and a card added, you will see the "Request early cancellation" button.
3. Press the button (or go directly to this link https://staging.new.expensify.com/settings/subscription/request-early-cancellation-survey ).
4. Observe the bottom button.
   (The same issue occurs on this page (https://staging.new.expensify.com/settings/subscription/disable-auto-renew-survey ) as well.)

Expected Result:

The bottom button currently has 40px of spacing, but it should be 20px like the other bottom buttons in the app.

Actual Result:

Incorrect button bottom padding spacing(40px) on the Request Early Cancellation page.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021919799293357443334
• Upwork Job ID: 1919799293357443334
• Last Price Increase: 2025-05-06

Issue Owner

Current Issue Owner: @JS00001

[melvin-bot]

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

[m-natarajan]

Proposal by @jayeshmangwani

Proposal

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

Incorrect button spacing is observed on the Request Early Cancellation page.

What is the root cause of that problem?

On the RequestEarlyCancellationPage, we use the FeedbackSurvey component to display the content.

App/src/pages/settings/Subscription/RequestEarlyCancellationPage/index.tsx

Lines 100 to 103 in c93cde5

	const surveyContent = useMemo(
	() => (
	<FeedbackSurvey
	formID={ONYXKEYS.FORMS.REQUEST_EARLY_CANCELLATION_FORM}

Within FeedbackSurvey, we use FormProvider as the page container, which has a default 20px bottom padding.

App/src/components/FeedbackSurvey.tsx

Lines 103 to 105 in c93cde5

	<FormProvider
	formID={formID}
	style={[styles.flexGrow1, styles.justifyContentBetween]}

Additionally, on this page, we use FixedFooter to display the bottom submit button, and FixedFooter also has its own default 20px bottom padding.

App/src/components/FeedbackSurvey.tsx

Lines 137 to 139 in c93cde5

	<FixedFooter>
	{!!footerText && footerText}
	<FormAlertWithSubmitButton

As a result, the 20px bottom padding is applied twice, causing extra spacing.

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

We can add paddingBottom: 0 style to the FixedFooter here to fix this double padding issue.

App/src/components/FeedbackSurvey.tsx

Lines 137 to 139 in c93cde5

	<FixedFooter>
	{!!footerText && footerText}
	<FormAlertWithSubmitButton

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

This is purely a UI issue. I am not sure if we want to add any tests for the UI padding bugs.

What alternative solutions did you explore? (Optional)

N/A
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]

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

[melvin-bot]

@CortneyOfstad 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[CortneyOfstad]

Sorry for the delay, I was OoO when this was assigned. I am able to see the spacing issue as well, so getting eyes on this. Thanks!

[melvin-bot]

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