IOU - Total with amount line is misaligned in IOU report page

[lanitochka17]

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.3.88-3
Reproducible in staging?: Yes
Reproducible in production?: No
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 staging.new.expensify.com
2. Request money from user with no pending IOU
3. Go to the IOU report page

Expected Result:

The Total with amount line is not misaligned

Actual Result:

The Total with amount line is misaligned. It is way above the line separating the Total and IOU previews

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

Android: Native

Android: mWeb Chrome

Bug6245652_1697906560462.Screen_Recording_20231021_212252_Chrome__1_.mp4

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0112b927d467996161
• Upwork Job ID: 1726739973694226432
• Last Price Increase: 2023-11-20

[melvin-bot]

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

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

[OSBotify]

👋 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.

[melvin-bot]

Triggered auto assignment to @srikarparsi (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[ishpaul777]

Proposal

Problem Statement

Total with amount line is misaligned in IOU report page

Root Cause

This comes from #29102, where we before the "Total" container VIew was a sibling View of AnimatedEmptyStateBackground container View but now the container is parent View of Total Container so the style applied to parent View justifyContent: 'space-between' is creating the extraspace between the horizontal line and "Total"

Changes required

option 1 - easiest solution is add new style to this View styles.justifyContentStart.(override 'space-between' style applied from StyleUtils.getReportWelcomeContainerStyle)

option 2- revert back to old heirarchy of views before #29102, this introduce back the issue #29102 was solving

[Ollyws]

@allroundexperts Could you spin up a quick PR for this? Thanks.