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

Edited by proposal-police: This proposal was edited at 2024-11-08 03:07:59 UTC.

Proposal

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

Inbox doesn't have this same top padding.

What is the root cause of that problem?

We don't add padding or margin style to the wrap View of LHN items

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

We can add styles.mv3 or styles.pv3 if we want to add both margin/padding top and bottom

Or if we only want to add a margin/padding top, we can add styles.mt3 or styles.pt3 here

To reach here, we need to decrease the margin-bottom here from 20px to 8px. Change styles.mv5 to styles.mt5, styles.mb2. Or if we want the margin top and bottom of TopBar is equal, we can remove styles.mv5 and add marginTop and marginBottom 14px to the View here.

What alternative solutions did you explore? (Optional)

We can add paddingTop: 12 to sidebarListContainer style or add styles.pt3/styles.mt3 here

Result

@shawnborton Actually, the padding is added to the inner component.

The expectation we want here is to move this to the outside component like this, right?

Proposal

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

Inbox LHN wrapper is missing 12px of top padding

What is the root cause of that problem?

New style for inbox LHN

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

We can style Inbox LHN wrapper like we did with Search page and workspace

• Remove marginHorizontal on each item in LHN

• Add missing margin to wrapper

<View style={[styles.pRelative, styles.flex1, styles.mt3, styles.mh3]}>

What alternative solutions did you explore? (Optional)

More simply just need to add styles.mt3 or styles.pt3 to wrapper

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Updated proposal.

Yeah @Themoonalsofall's proposal is what I had in mind for this.

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

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

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

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

Hi @shawnborton, just wanna confirm, given we want to add top padding with 12px, then when we scroll chat list, will it reach the "upper bound 1" or "upper bound 2" in my below screenshot?

The top padding should be considered part of the scrollable content, if that makes sense. So your upper bound 1.

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

I'm OOO Dec 16-20, adding a leave buddy

next steps:

• might need payment while I'm out

Reviewing label has been removed, please complete the "BugZero Checklist".

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.75-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• add top padding to LHN wrapper #53296

If no regressions arise, payment will be issued on 2024-12-20. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment through NewDot Manual Requests
• @mkzie2 requires payment automatic offer (Contributor)

@hoangzinh @sonialiap / @greg-schroeder @hoangzinh The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

BugZero Checklist:

• [Contributor] Classify the bug:

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

  Link to comment: Nope, it's just a UI adjustment to keep consistency with other pages

• [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: N/A

• [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.

  Nope, it's just a small change in UI.

This looks ready to go for 12/20

Requested payment in ND

@greg-schroeder can you post a payment summary when you get a chance? I don't think the automation ran.

@tylerkaraszewski, @hoangzinh, @sonialiap, @greg-schroeder, @mkzie2 Whoops! This issue is 2 days overdue. Let's get this updated quick!

Payment summary:
@hoangzinh $250 through NewDot cc @garrettmknight
@mkzie2 $250 through upwork ✔️