Search - Header Pills are touching each other when highlighted, no spacing

[IuliiaHerets]

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: v9.0.26-1
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #47753
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Go to Search tab on the bottom > Expenses > Observe the header pills

Expected Result:

User expects to have spacing between each pill

Actual Result:

There is no spacing between the Search Pills

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6586081_1724903004159.Search_pills_are_touching_when_highlighted.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @RachCHopkins (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 @pecanoro (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

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

[IuliiaHerets]

We think that this bug might be related to #wave-control

[shubham1206agra]

This is the intended design.

cc @luacmartins for confirmation

[daledah]

Proposal

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

There is no spacing between the Search Pills

What is the root cause of that problem?

We are not setting margin for the button here

App/src/components/Search/SearchStatusBar.tsx

Line 155 in 8c69c58

style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}

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

We should add margin horizontal for these buttons and pay attention to the first and last item in here

What alternative solutions did you explore? (Optional)

This is result when I set margin horizontal is 2px

[rayane-djouah]

I believe this is the intended design.

cc @Expensify/design

[shawnborton]

Correct, this is not a bug - going to close.