[$125] "No results found" text is not aligned to left edge

[m-natarajan]

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.49-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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1709846865518079

Action Performed:

1. Open app
2. Click on search
3. Type some random text which will give "No results found" message
4. Verify the alignment with left edge

Expected Result:

Should be aligned with left edge

Actual Result:

Not aligned with left edge

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

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019fd4e434eac176f9
• Upwork Job ID: 1766288950642847744
• Last Price Increase: 2024-03-16
• Automatic offers:
• brandonhenry | Contributor | 0

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[apeyada]

Proposal

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

"No results found" is not aligned to left edge

What is the root cause of that problem?

input view has 16px horizontal padding but header message has 20px horizontal padding

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

set 16px everywhere

App/src/components/SelectionList/BaseSelectionList.tsx

Line 426 in 537b7c0

<View style={[styles.ph5, styles.pb5]}>

update this style to [styles.ph4, styles.pb5]

What alternative solutions did you explore? (Optional)

set 20px everywhere

App/src/components/SelectionList/BaseSelectionList.tsx

Line 394 in 537b7c0

<View style={[styles.ph4, styles.pb3]}>

update this style to [styles.ph5, styles.pb3]

[shawnborton]

@greg-schroeder just a note that we want to make the bounty on this one super small given that it's such a tiny change.

[allgandalf]

Proposal

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

"No results found" text is not aligned to left edge

What is the root cause of that problem?

we set the style of the header message to the following which is not consistent with the search field titie:

Header message:

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 426 to 427 in 537b7c0

	<View style={[styles.ph5, styles.pb5]}>
	<Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>

Search box:

App/src/components/SelectionList/BaseSelectionList.tsx

Line 394 in 537b7c0

<View style={[styles.ph4, styles.pb3]}>

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

We need to check first if the text in header message is : common.noResultsFound and if so then set the style according to the search input header.

Note: we should not directly change the view style of the headerMessage as this will cause a regression when we actually have search results and it will not align properly

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[brandonhenry]

Proposal

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

The "No results found" text in the search page is not aligned with the left edge of the search input. We want the "No results found" text to have the same left padding as the search input for consistency.

What is the root cause of that problem?

The root cause is that the headerMessage prop passed to BaseSelectionList is being rendered with ph5 (padding horizontal 5) style, while the search input is rendered with ph4 style. This causes the misalignment.

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

I propose we modify BaseSelectionList to accept an optional headerMessageStyle prop. This prop would default to [styles.ph5, styles.pb5] to maintain the existing styling in most cases.

However, when rendering the search page, we can pass a custom headerMessageStyle prop to override the padding:

<SelectionList
    ...
    headerMessage={headerMessage}
    headerMessageStyle={headerMessage === translate('common.noResultsFound') 
      ? [styles.ph4, styles.pb5] 
      : undefined
    }
    ...
/>

This way, the "No results found" message will have ph4 padding to match the search input, but other uses of headerMessage will retain the original ph5 padding.

What alternative solutions did you explore? (Optional)

Another option would be to always use ph4 padding for headerMessage. However, this could potentially break the alignment/styling in other places where BaseSelectionList is used.

By making headerMessageStyle customizable, we can surgically fix the search page alignment without risking unintended side effects elsewhere in the app.

[melvin-bot]

@greg-schroeder, @allroundexperts Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[greg-schroeder]

Proposal review

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[greg-schroeder]

Bump @allroundexperts

[allgandalf]

Note

@allroundexperts , No conflict with your chosen proposal but can i ask what did my proposal lack, I guess i proposed a similar solution:)
thanks

[allroundexperts]

@allroundexperts , No conflict with your chosen proposal but can i ask what did my proposal lack, I guess i proposed a similar solution:)

thanks

From my understanding, your proposal was lacking where to put the changes.

[allgandalf]

ohh okay, understood, thanks for the explanation:) I thought i mentioned the baseselection list in the RCA

Still would leave it to the internal engineer to consider my proposal as i had shown the correct place in RCA

[melvin-bot]

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

[brandonhenry]

Still awaiting assignment but can have this turned around by Saturday

[brandonhenry]

@shawnborton can we get some more details? What did you see that on? I just checked on all devices and did not see what you shared in your pic 👀

[brandonhenry]

Ahh I see. @shawnborton what you shared, seems to be related to the category page. This ticket, is specifically referencing the search results. So, you seem to have found a separate bug to this one

Cc. @greg-schroeder

[grgia]

Is the root issue the same? Are we not using the same component for these two inputs?

[shawnborton]

Yeah, apologies if we didn't make it clear in the issue but ideally this is solved everywhere as to me, this feels like the same kind of component/UX.

[brandonhenry]

It seems similar and I can make the fix! I was instructed to only focus on the specific bug in an alternative PR so wasn't aware I needed to test "similar UX" components..

The fix for this, was applying styling specifically in the SearchPage component. Based on new info, the goal should be to locate all areas the search bar is used and add styling when results are not found. After further analysis, the headerMessage currently is used in the same way across all search types. That said, I have applied the simple additional fix to my solution to make this work across "no results found" error messages

PR: #41221

@shawnborton @grgia @allroundexperts

[greg-schroeder]

PR remains in progress/review w/ @shawnborton

[shawnborton]

The PR above looks good to me, but now we need a C+ to run through the checklist. Will comment on the PR too.

[greg-schroeder]

PR looks all green, we should be ready to merge eh?

[brandonhenry]

@greg-schroeder indeed, should be good to go. not sure what would hold it 👀
Cc. @allroundexperts @shawnborton

[shawnborton]

Just merged, sorry about that!

[brandonhenry]

no worries at all, i thought it was automatic 😄

[greg-schroeder]

Merged. Awaiting deploy to staging -> prod

[brandonhenry]

@greg-schroeder updates here? just saw this one lingering - no rush :D

[mallenexpensify]

Looks like this hit production 3 weeks ago

• Patch for search lhn no results found padding #41221 (comment)

Looks like you were auto-paid @brandonhenry cuz you were hired on a milestone.

@greg-schroeder , I removed Reviewing, can you wrap this up? thx

[greg-schroeder]

Ah, sorry folks, the automation didn't run, so my tracking didn't pick up payment pending

[greg-schroeder]

Payment summary:

Contributor: @brandonhenry - $125 - paid via upwork
C+: @allroundexperts - $125 - ND Manual Request

cc @JmillsExpensify

[JmillsExpensify]

$125 approved for @allroundexperts