[HOLD for payment 2025-02-04] [$125] Android - Cards - Next button for company card instruction page is overlapped

[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: 9.0.85-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5457021
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to More features on workspace settings
2. Enable Company Cards
3. Navigate to Company Cards
4. Click on Add Company card
5. Click on American Express from the list
6. Click Next
7. Select the option for "Corporate Cards" and next
8. Notice the Next button in the bottom

Expected Result:

Next button for instructions to set up the company card feed page don't overlap with navigation bar or scrollable

Actual Result:

Next button for company card instruction page is overlapped with navigation bar and the page is not scrollable

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• 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/~021879607222461961573
• Upwork Job ID: 1879607222461961573
• Last Price Increase: 2025-01-17

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[daledah]

Proposal

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

Android - Cards - Next button for company card instruction page is overlapped

What is the root cause of that problem?

We didn't apply the safe area padding bottom in ScrollView:

App/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx

Lines 96 to 98 in 3fc71c9

	<ScrollView
	style={styles.pt0}
	contentContainerStyle={styles.flexGrow1}

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

We should apply safeAreaPaddingBottomStyle to style or contentContainerStyle in ScrollView:

    const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();

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

What alternative solutions did you explore? (Optional)

We can use includeSafeAreaPaddingBottom={true} in:

App/src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx

Line 88 in 3fc71c9

includeSafeAreaPaddingBottom={false}

[dukenv0307]

Enable includeSafeAreaPaddingBottom looks promissing

[dukenv0307]

I'm working on WS feed project, I can help take it as C+ @abekkala

[melvin-bot]

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

[melvin-bot]

Current assignee @dukenv0307 is eligible for the External assigner, not assigning anyone new.

[dukenv0307]

@daledah's alternative solution looks good to me. We can remove includeSafeAreaPaddingBottom={false} since the default value is true.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @stitesExpensify, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[shubham1206agra]

@stitesExpensify This is dupe of https://expensify.slack.com/archives/C049HHMV9SM/p1736238279772929, and will be solved in #54285

cc @mountiny

[melvin-bot]

📣 @daledah 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Upwork job price has been updated to $125

[mountiny]

Gonna handle and move this forward as, in this case, it's influencing the UX as the button cannot be clicked easily - @daledah, can you raise a PR, please, for $125? since its a tiny change?

[stitesExpensify]

Sorry, misclick

[mountiny]

@daledah what is your eta for the PR?

[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.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: next button in card instruction page is overlapped #55470

If no regressions arise, payment will be issued on 2025-02-04. 🎊

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

• @dukenv0307 requires payment through NewDot Manual Requests
• @daledah requires payment (Needs manual offer from BZ)

[melvin-bot]

@dukenv0307 @abekkala @dukenv0307 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]

[dukenv0307]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/48119/files#r1933911594

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in https://app.slack.com/client/E047TPA624F/C01GTK53T8Q has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the https://github.com/Expensify/App/blob/main/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md steps using the template below to ensure the same bug will not reach production again. Yes

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Test:

1. Navigate to More features on workspace settings
2. Enable Company Cards
3. Navigate to Company Cards
4. Click on Add Company card
5. Click on American Express from the list
6. Click Next
7. Select the option for "Corporate Cards" and next
8. Verify that: The Next button is not overlapped

Do we agree 👍 or 👎

[abekkala]

PAYMENT SUMMARY FOR FEB 04

• Fix: @daledah [$125, if no regressions] Offer
• PR Review: @dukenv0307 [$125, if no regressions] payment via NewDot
  please complete checklist

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @dukenv0307 owed $250 via NewDot
• ROLE: @daledah paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@abekkala)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1879607222461961573/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[abekkala]

PAYMENT SUMMARY FOR FEB 04

• Fix: @daledah [$125] payment sent and contract ended - thank you! 🎉
• PR Review: @dukenv0307 [$125] payment via NewDot