[Due for payment 2026-10-28] [$175] There's an uneven spacing between the date and report field in the Create expense flow

@dubielzyk-expensify

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

Version Number: 9.5.0-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

Go to https://staging.new.expensify.com/
Create workspace
Click + Create expense > manual

Expected Result:

Space between the date and report field in the Create expense flow should be 16px instead of 24px

Actual Result:

Space between the date and report field in the Create expense flow is 24px

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~022105720646318193411
Upwork Job ID: 2105720646318193411
Last Price Increase: 2026-10-01

Issue Owner

Current Issue Owner: @mallenexpensify

Proposal

This is already fixed on main. Expense - Scan confirm page receipt has 8px gap above first field instead of 16px removed the extra 8px. It merged today (2026-10-01 15:42 UTC) but hasn't shown up on staging yet. Retest after the next staging deploy, then close this issue if the gap is 16px.

What is the root cause of that problem?

Each field box has 8px of margin above and below it. Two neighbors add up to 16px. The Date field's wrapper added an extra 8px bottom margin (mb2) on top of the 8px it already had from DatePicker. So the gap was 8 + 8 + 8 = 24px.

Code references

Old wrapper with the extra mb2: DateField.tsx:134
DatePicker adds its own mv2 (8px top and bottom): DatePicker/index.tsx:231
The Report row (ExpenseFieldRow) adds mv2: ExpenseFieldRow.tsx:172

How it happened:

Make Date field inline in the new manual expense flow changed the Date wrapper from mv2 to mb2. At that time, the rows after Date had no margin, so the mb2 was needed.
[CFI] Update the Manual create expense form to use dropdown-style rows and a compact add-receipt button turned Report into a bordered row with its own mv2. That made the margins stack into 24px.

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

None. The fix PR changed the Date wrapper to mh4 only. You can see that at DateField.tsx:134 on main. The change is in DateField itself, so it also covers Distance and the other flows that use it.

I couldn't check the new spacing on a local web build because the test browser session failed to load. The conclusion is based on the code and the merged diff.

Related: Expense - Scan confirm page receipt has 8px gap above first field instead of 16px is the issue that PR fixed.

Next Steps for Contributor+ team:
To accept: Retest on staging after the fix PR deploys, then close this issue.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

@truph01

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

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

@truph01

@truph01, I’m unable to reproduce the issue, and it appears to have been fixed by this PR: #102640

I can still see it on staging:

Can you try it on a workspace with tags and attendees tracking turned to on to see if you can reproduce it?

@dubielzyk-expensify

Hi @dubielzyk-expensify , this issue is happening because PR #102640 was reverted.

@dubielzyk-expensify, @truph01 , the root cause in the current code is the extra styles.mb2 margin on the editable Date field.

The Date field currently has an 8px bottom margin:

App/src/components/MoneyRequestConfirmationList/sections/DateField.tsx

Line 134 in ddd4b14

The Report field already has its own 8px top margin. These margins combine and create a 24px gap, while the expected spacing is 16px.

update it to:

<View style={styles.mh4}>

This removes the extra 8px margin and fixes the uneven spacing between the Date and Report fields.
If you would like, I can open a PR or submit the proposal to fix this.
Thanks!

@truph01

I'll let @truph01 handle the code and proposal side 👍

@dubielzyk-expensify

I'll let @truph01 handle the code and proposal side 👍

Thanks, @dubielzyk-expensify.

@truph01, I have all the required devices ready to test this change according to the PR checklist. I can verify the fix across Android, iOS, and web, and open the PR as soon as the issue is assigned to me.

Please share your thoughts. If you consider this solution valid, I can open the PR for it. Thanks!

Screen.Recording.2026-10-05.at.2.38.19.PM.mov

Screen.Recording.2026-10-05.at.2.40.54.PM.mov

@truph01

@truph01 Eep! 4 days overdue now. Issues have feelings too...

Contributor+ Checklist:

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

Link to the comment on the PR:
Link to the comment on the Issue:
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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:
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Precondition:

Test:

Go to ND
Click + Create expense > manual
Verify: Space between the date and report field in the Create expense flow should be 16px instead of 24px

Do we agree 👍 or 👎

@mallenexpensify

Triggered auto assignment to @mallenexpensify (Awaiting Payment)

@truph01

Payment Summary

Resolving PRs:

Fix uneven spacing between the Date and Report fields on the expense form #103366
Reviewer: @truph01 owed $175 via NewDot

BugZero Checklist (@mallenexpensify)

I have confirmed assignees, roles, and Upwork contracts look correct
I have paid out Upwork contracts / manual NewDot requests
[BugZero Assignee] I have created a GH issue for creating/updating the regression test once above steps have been agreed upon

@truph01

Payment Summary

Contributor+: @truph01 due $175 via NewDot

Navigation Menu