Fix product description truncation

[Yassir4]

What? Why?

• Closes Product description not correctly truncated #10685

The product description should always be truncated if the text exceeds the parent width.
I've tested this using long descriptions with list/code/quote/title to simulate all the possible tags.

What should we test?

As admin
0. Log in as an enterprise shop and create shipping/payment methods, and then create 3 products a product edit the description respectively:

1. Enter this text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis metus diam, eget scelerisque nibh auctor non. Vestibulum tempor non dolor id luctus. as a product description.

2. Enter the same above text as a quote

3. Enter the first text and change some random text inside to be bold

4. Create an order cycle and add the products to it. If the order cycle is open, these should be visible in the shopfront.

As customer
5. Visit the shopfront and you should see all the products description truncated.

Release notes

Changelog Category (reviewers may add a label for the release notes):

• User facing changes
• API changes (V0, V1, DFC or Webhook)
• Technical changes only
• Feature toggled

[mkllnk]

Thank you!

The style rules make sense but I can't verify the result without testing. We'll look at it on a staging server.

[filipefurtad0]

Hey @Yassir4 ,

Welcome 🎉
Many thanks for this contribution and the detailed test instructions.

Before this PR

For a desktop device:

For an iphone 12:

After this PR

For a desktop device:

For an iphone 12:

Looks great! Merging, thanks again 🙏

[drummer83]

Hi @Yassir4 and @filipefurtad0,
Did we change anything about the height of that description line?
I'm asking because the "g" looks cropped at the bottom.
It's not critical but it doesn't look very nice...

[Yassir4]

Nice Catch @drummer83, I didn't spot that
I didn't explicitly change the height, but I think overflow: hidden on the * selector may have done that.
I will try to fix it in the next PR.