[Due for payment 2025-05-14] [$250] Expense - Manual Tab Button and Distance Tab padding are not consistent

[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.29-0
Reproducible in staging?: yes
Reproducible in production?: yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @dukenv0307
Slack conversation (hyperlinked to channel name): expensify-bug

Action Performed:

1. Open the staging.new.expensify
2. Tap on FAB and select “Create Expense”
3. Open Manual Tab and Distance Tab to compare Next Button

Expected Result:

Button Next in Maunal and Distance has length consistent

Actual Result:

Button in Manual Tab shorted than Distance Tab

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.1140.mp4

Screen.Recording.2025-04-15.at.14.11.52.mp4

https://github.com/user-attachments/assets/a44c8043-2cb9-4804-8618-0bc5766067ca
View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912903614713817534
• Upwork Job ID: 1912903614713817534
• Last Price Increase: 2025-04-24

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (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 @dukenv0307

Proposal

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

Manual Tab Button and Distance Tab padding are not consistent

What is the root cause of that problem?

The Button in the Manual Tab has a padding of 20 due to the padding of its containing View styles.pageWrapper

App/src/pages/iou/MoneyRequestAmountForm.tsx

Line 296 in 4ee6daa

style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0]}

Meanwhile, the Button in the Distance Tab uses styles.ph4, which has a value is 16. styles.ph4

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 576 in 6d6628c

style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]}

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

Since 20 is the spacing that other positions are using with this Button style, the padding of the Distance Tab's Button needs to be updated to 20. Use styles.ph5 instead of styles.ph4

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 576 in 6d6628c

style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]}

or remove styles.ph4 and add it to the outer View

App/src/pages/iou/request/step/IOURequestStepDistance.tsx

Line 562 in 6d6628c

<View style={[styles.w100, styles.pt2]}>

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

NA

What alternative solutions did you explore? (Optional)

[zanyrenney]

Nice, good catch. This is just a UI in consistency and I don't think we need the design team to weigh in, given the proposal above. Adding this to quality and adding the external label.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[dangrous]

happy to grab internal review on this when it's ready