[BUG] Line wrapping in 'Compare search results' result list problematic

[macrakis]

What is the bug?

In the Results field of Search Relevance / Compare search results, the text wrapping is bizarre.

How can one reproduce the bug?

With the query {} on the sample_data_ecommerce index, the first result (with a certain window width) looks like this:

category: ["Men's
Clothing"] currency: EUR customer_first_name: Eddie customer_full_name :Edd
ie
Underwood customer_gender: MALE customer_id: 38 customer_last_name: Underwo

Three problems:

• line breaks only happen at spaces within value fields (and not between the field name and the value or the value and the next field name)
• the line is overflowing, leaving orphans like "ie" on a line by themselves
• (not shown in this example), there can be a linebreak between the field name and the following ":".

What is the expected behavior?

Result should be formatted like this:

category: ["Men's Clothing"] currency: EUR customer_first_name:
Eddie customer_full_name: Eddie Underwood customer_gender: MALE
customer_id: 38 customer_last_name: Underwood customer_phone: day_of_week:
Monday day_of_week_i: 0 email: [email protected] manufacturer:

What is your host/environment?

Chrome 107.0.5304.87 on macOS 12.6 Intel

Do you have any screenshots?

(I don't know why the colon after "category" is missing here -- I couldn't reproduce that.)

Do you have any additional context?