Web - Chat - Scan - Extra padding above the error "Enter an amount"

[kavimuru]

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: 1.4.74-0
Reproducible in staging?: y
Reproducible in production?: n
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: Applause internal team
Slack conversation:

Action Performed:

1. Go to https://42057.pr-testing.expensify.com/
2. Go to FAB > Submit expense.
3. Submit a scan expense to any user.
4. Go to transaction thread.
5. Click Merchant.
6. Enter a merchant and save it.

Expected Result:

There will be no extra padding above the error "Enter an amount".

Actual Result:

There is extra padding above the error "Enter an amount".

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

330490244-56258565-80d6-4eef-bc92-54cded7fc652.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @puneetlath (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

[melvin-bot]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open Staging deploy checklist to see the list of PRs included in this release, then work quickly on the following:

1. If you find which PR caused the issue/bug, you can reassign it to the person responsible for it.
   • If the author is OOO or won’t get online before the daily deploy is due, you are responsible for finding the best fix/path forward. Don’t hesitate to ask for help!
2. Try to reproduce the issue, if the bug is on production, remove the DeployBlocker label but stay assigned to fix it (or find out which PR broke it to get help from the author).
   • You can adjust the urgency of the issue to better represent the gravity of the bug.
   • If the issue is super low priority, feel free to un-assign yourself.
   • Be careful with PHP warnings, sometimes it is more complex than just adding a null coalescing operator as they might be uncovering some bigger bug.
   • If it was a one-off issue that requires no action (for example, Bedrock was down or it is a duplicated issue), you can close it.

Remember rule #2: Never un-assign yourself from a real DeployBlocker unless you are 100% sure someone else is assigned and will take care of it.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[neonbhai]

Proposal

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

Extra padding above the error "Enter an amount"

What is the root cause of that problem?

We pass the style menuItemError here:

App/src/components/MenuItem.tsx

Line 688 in 4705d89

style={styles.menuItemError}

Which has the extra marginTop:

App/src/styles/index.ts

Lines 4479 to 4480 in 4705d89

	menuItemError: {
	marginTop: 4,

The marginTop adds on to the margin mt2 we set here:

App/src/components/FormHelpMessage.tsx

Line 39 in ac2b3a0

<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, style]}>

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

We should set the marginTop to 0

marginTop: 0

This would reset the extra mt2 here

[Beamanator]

@neonbhai good catch, did you find which PR introduced this bug? I'm also going to mark NAB b/c this is a pretty small spacing bug which shouldn't block deploy

[neonbhai]

@Beamanator hi, this seems to be related to the work we did in #41670

[Beamanator]

Good find @neonbhai ! I think I found where exactly, noted here: https://github.com/Expensify/App/pull/41670/files#r1602998785

[narefyev91]

@neonbhai @Beamanator that's a new UI change - and it's correct padding. Please check this one #41670 (comment)
cc @shawnborton

[shawnborton]

Correct, just going to close this out then!

[shawnborton]

@Beamanator in the future, please tag the design team to help confirm if these things are bugs or not - thanks!

[Beamanator]

Thanks for pointing that out @narefyev91 ! 👍 And good shout @shawnborton 😅