[HOLD for payment 2025-02-05] Udpate the padding of the search router results to the edge of the screen

[mountiny]

Problem

Right now, the Search results in the router have more padding than the LHN chats, which is mainly noticeable on phone as there is less space for the search results. This does not look very good.

Solution

Let's explore, but I would suggest we update the Search router design so the padding of the search results is identical to the LHN chats.

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

Triggered auto assignment to @sakluger (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]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[mountiny]

@shawnborton Would you be able to chime on this one and maybe provide the exact padding we would like in the search results too? Thanks!

[nkdengineer]

Proposal

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

Udpate the padding of the search router results to the edge of the screen

What is the root cause of that problem?

In small screen, we are setting the padding of the LHN to 20px
and in search results it's 32px

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

We should make it has the same padding by remove shouldUseNarrowLayout here

            sectionListStyle={[styles.ph2, styles.pb2]}

App/src/components/Search/SearchRouter/SearchRouterList.tsx

Line 482 in b59f23b

sectionListStyle={[shouldUseNarrowLayout ? styles.ph5 : styles.ph2, styles.pb2]}

Some minor style can be discussed in PR phase

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

OR we can update the padding of the LHN to 32px
Result

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.

[shawnborton]

I think a simple approach would be to just change the paddingHorizontal from 20px to 12px on the container that wraps the results on mobile. That should make them look identical to the LHN rows:

Thoughts @Expensify/design?

Also just to confirm @mountiny - we're cool with how these results currently look like on desktop, right?

[dannymcclain]

Thoughts @Expensify/design?

No real thoughts from me. The simplest way to accomplish them looking the same works for me!

[sakluger]

It sounds like this will be a very simple change. @mountiny do you mind setting the price once we settle on the padding we'd like?

[mountiny]

we're cool with how these results currently look like on desktop, right?

Yeah desktop/ web looks fine, its just the difference that is noticeable in mobile when the search page open over the LHN.