Extra margin over maximum limit reached error on login page

[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!

---

Action Performed:

1. Open the app
2. Open settings
3. Open profile
4. Open contact methods
5. Click on Add
6. Add new contact method
7. Reopen and keep on clicking resend magic code until you see 'maximum limit reached' error
8. Sign out from the app
9. Login again with same user and observe margin above 'Maximum limit reached' error
10. Write any phone number without country code to trigger insert country code error and observe margin above that error

    Expected Result:

    App should keep consistent margin above all the errors displayed on login page

    Actual Result:

    App has 20px more margin on top for 'Maximum limit reached' error then any other errors on login page

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• [x] Android / native
• [x] Android / Chrome
• [x] iOS / native
• [x] iOS / Safari
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.3.24.4 Reproducible in staging?: y Reproducible in production?: y 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 Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/43996225/15e2299d-16e9-4f94-8e01-14b8aac982f2

https://github.com/Expensify/App/assets/43996225/c5267e99-eeef-433f-ba64-85e9d7632940

Expensify/Expensify Issue URL: Issue reported by: @dhanashree-sawant Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685719639488529

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [ ] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [ ] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[dukenv0307]

Proposal

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

Extra margin over maximum limit reached error on login page

What is the root cause of that problem?

We are setting margin-top: 20px for FormAlertWithSubmitButton component https://github.com/Expensify/App/blob/96adb8e58e53fd76c7a316234dab322643dfd479/src/pages/signin/LoginForm.js#L208 If there is no message, It looks good

But when there is an error message the margin-top will be 28px

because the error message also has margin-top: 8px https://github.com/Expensify/App/blob/96adb8e58e53fd76c7a316234dab322643dfd479/src/components/FormHelpMessage.js#L39

Note that: I also checked other error messages in our app and see that in all other places the margin-top: 8px will be added above the error message

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

https://github.com/Expensify/App/blob/96adb8e58e53fd76c7a316234dab322643dfd479/src/pages/signin/LoginForm.js#L208 In here we only should add margin-top when there is no error message by checking like this

<View style={[!serverErrorText && styles.mt5]}>

Result

[dhairyasenjaliya]

Proposal

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

• Extra margin over maximum limit reached error on login page

What is the root cause of that problem?

• The root cause we are adding styles.mt5 directly to the <view> which we have wrapped to <FormAlertWithSubmitButton> this space will also be added if we got some server errors makes extra space visible on error

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

• We need to remove parent <View> and add styling based on serverError directly to containerStyles which is basically a props of<FormAlertWithSubmitButton>

• We can check if we have serverError we can remove all vertical styling since we already have default marginTop: 8 which we are already using in all the other component

//LoginForm.js 
                    this.props.isVisible && (
-                        <View style={[styles.mt5]}>
                            <FormAlertWithSubmitButton 
-                                containerStyles={[styles.mh0]}
+                            containerStyles={[styles.mh0, !_.isEmpty(serverErrorText) ? {} : styles.mt5]} 
                            />
-                        </View>
                    )

[hungvu193]

IMO, @dhairyasenjaliya 's proposal hit the 🎯

[joekaufmanexpensify]

I can reproduce this. This is a pretty minor issue, but the padding is different here. @shawnborton curious for your take here. We should standardize on less padding here, right? (So using the padding of the phone number error in the bottom of the two videos in OP)?

[shawnborton]

Hmm I don't know if the margin/padding thing is really that big of a deal, I think we can close this personally.

[joekaufmanexpensify]

Sounds good. Closing!