[Due for payment 2025-02-18] [$125] Android - Company Cards-The Save button does not have the right alignment at the page bottom

[lanitochka17]

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.91-1
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/5525834
Email or phone of affected tester (no customers): applausetester+ccardfeed@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to the Expensify app
2. Login with the user applausetester+ccardfeed@applause.expensifail.com
3. Tap on Settings
   4.Tap on Workspaces
4. Go to "Company Cards tests - DO NOT DELETE!" workspace settings
5. Tap on Company cards
6. Tap on Assign card
7. Select the user you're logged in as
8. Pick any card
9. Tap on Custom start date

Expected Result:

The Save button is displayed close to the navigation bar on the standard date picker page

Actual Result:

The Save button is displayed far from the navigation bar, with an empty space between it and the bar

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

Bug6727902_1738183423829.Save_button.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885371484718550104
• Upwork Job ID: 1885371484718550104
• Last Price Increase: 2025-01-31
• Automatic offers:
• shubham1206agra | Contributor | 105941089

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

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

[shubham1206agra]

We can fix this via #52621. Since this modal will no longer be needed.

cc @dannymcclain

[OfstadC]

Thanks @shubham1206agra - Should we close this issue out then?

[dannymcclain]

We can fix this via #52621. Since this modal will no longer be needed.

I think we would still use the push-to-page pattern for the Date field in this case. cc @Expensify/design for the gut check but I think even with the date picker improvements this flow would stay as is.

[shawnborton]

Yup, makes sense to me. So yeah, we should probably fix this :)

[dubielzyk-expensify]

Yeah, definitely wanna keep the consistency of animation across the app for these things.

[joekaufmanexpensify]

Noting that I added a test commercial feed to @shubham1206agra's workspace to assist with testing the fix for this issue. I added the same feed we used for other C+/callstack card testing here. cc @mountiny

[shubham1206agra]

Proposal

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

Android - Company Cards-The Save button does not have the right alignment at the page bottom

What is the root cause of that problem?

In

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 30 in ad3bddd

function TransactionStartDateSelectorModal({isVisible, date, handleSelectDate, onClose}: TransactionStartDateSelectorModalProps) {

We are using modal component to render the date form. The catch here is we make includeSafeAreaPaddingBottom={false}

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 54 in ad3bddd

includeSafeAreaPaddingBottom={false}

which makes safeAreaInsetPaddingBottom inside FormWrapper to be non-zero, which adds the extra bottom padding incorrectly.

App/src/components/Form/FormWrapper.tsx

Line 111 in ad3bddd

style={[style, {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}

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

Remove

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 54 in ad3bddd

includeSafeAreaPaddingBottom={false}

This will be okay in this case since we have overridden the bottom padding to be zero here

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 52 in ad3bddd

style={styles.pb0}

Result

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

NA since this is an UI change

What alternative solutions did you explore? (Optional)

[shubham1206agra]

@OfstadC Can you mark this issue as external so we can assign a C+ here?