Search: text in the results is not properly wrapping

rw-ye commented 1 year ago

Quick summary

A user reported this issue in chat: 34884263-hc

The issue occurs when Jetpack instant search is enabled and the Result format is set to Product. When searching for a product on the front-end it looks like the spaces are removed completely and if the product title is too large it will overlap with other products.

Steps to reproduce

Enable Jetpack instant search from Jetpack > Search
Go to Jetpack > Search, Customize Jetpack Search and set Result Format to Product
Make sure you have a product published on your site.
If you search for the product on the front-end of the site, all the spaces will be removed in the results. Example: https://test936672080.wpcomstaging.com/?s=test
Create a product with a larger title length and the search results will show it extending outside of its container.

What you expected to happen

Expected the product title to remain within its container and not overlap with other product titles.

What actually happened

The spaces are removed for the product titles and if the title is too large, it will overlap with other products in the search results.

Context

Customer report: 34884263-hc

Platform (Simple, Atomic, or both?)

Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

See details in this comment.

Add this custom CSS:

.jetpack-instant-search__search-result-title .jetpack-instant-search__search-result-title-link {
 display:block; !important
}

zachspears commented 1 year ago

Hello @rw-ye, I was unable to produce this issue and tried on two separate sites, perhaps I have not added enough products or it is theme specific? Do you mind sharing if you are still seeing the issue? Note for testing: You must upgrade Jetpack Search in order to access this functionality.

On a possibly related note, I tried updating the product names after my first attempt thinking the numeral may have had an impact on the error showing itself, and even after updating the name, it still displayed the old produce names: Screenshot on 2022-12-22 at 20-22-07

Here is what I was seeing on my second attempt: Screenshot on 2022-12-22 at 20-29-20

rw-ye commented 1 year ago

Hey @zachspears, The issue shows on the front end of the site, not via the search options. Example: https://test936672080.wpcomstaging.com/?s=test

I have been able to reproduce in both classic and FSE themes (I've tested Twenty Nineteen, Masu, and Kingsley) so I don't think it's theme specific.

I updated the steps to make it a bit clearer that the issue occurs when searching for a product on the front-end of the site.

NoHopeRadio commented 1 year ago

I believe the issue here is that there's an extra layer of display:flex; than there needs to be in the search results, specifically for the titles, and so the highlighted term (mark) gets pressed up against the text.

This CSS seems to be the issue, in lines 711-715 of the /wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.chunk-main-payload.css file. I don't know exactly where this file is from, though.

.jetpack-instant-search__search-result-title .jetpack-instant-search__search-result-title-link {
 align-items:center;
 display:flex;
 text-decoration:none
}

I think it probably comes from here: https://github.com/Automattic/jetpack/blob/210bdac435e6064a913b75a14a60231acc603651/projects/packages/search/src/instant-search/components/search-result.scss

Changing that display to display:block; seems to fix the problem. When providing CSS as a fix, it will need !important attached to it.

Here's how the above test site looks with this change:

after picture of jetpack search bug