[$500] Press highlight on a field in expense details overlaps with error message weirdly

[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.29-0
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
Expensify/Expensify Issue URL:
Issue reported by: @luacmartins
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705808584924989

Action Performed:

Precondition : Have some violation rules for the expenses in the OD

1. Create an expense report
2. Open the receipt to view the details
3. enter the required fields values (in this case category and tag fields)
4. Long press the category/tag field to highlight and observe

Expected Result:

There should be no overlapping.

Actual Result:

overlaps the error message weirdly

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?

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b61739c3e4f7859e
• Upwork Job ID: 1749662510960947200
• Last Price Increase: 2024-01-23

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Press highlight on a field in expense details overlaps with error message weirdly

What is the root cause of that problem?

In the ViolationMessages component we have -8px of margin top.

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

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

We should remove margin top.

Result

Result with no negative margin:

Result with children prop and updating some stylings:

What alternative solutions did you explore? (Optional)

1. I think the best we can do here is to accept children prop inside MenuItem and use ViolationMessages component as a children.
2. Or we should use error prop in MenuItemWithTopDescription to show the error. We have already used error prop, we can use errorText to show the ViolationMessages.

[jeremy-croff]

Proposal

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

Highlighted area doesn't include the full row when there's an error message

What is the root cause of that problem?

The highlight style doesn't grow into full row when there's an error message.

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

We should update the styling to flex the highlighted area based on the content, inccluding the error message

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

Included more alternative options.

[Krishna2323]

Proposal Updated

Included results screenshots & permalink.

[dukenv0307]

Proposal

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

overlaps the error message weirdly

What is the root cause of that problem?

We have a negative margin here so the expense details overlaps the error violation message

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

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

The reason for the negative margin is to decrease the space between the error and the menu description. But I think we can decrease the padding vertical of the menu description by adding wrapperStyle prop into MenuItemWithTopDescription if we can use violation transaction

Ref: #32594 (comment)

App/src/components/ViolationMessages.tsx

Line 15 in 9c552ab

<View style={[styles.mtn2, isLast ? styles.mb2 : styles.mb1]}>

What alternative solutions did you explore? (Optional)

We can combine the violation message with line break and pass this into MenuItemWithTopDescription or allow pass array error prop into MenuItemWithTopDescription