Stepper: Offer sticker overlaps domains

[escapemanuele]

Details

Reported in https://github.com/Automattic/wp-calypso/issues/94394

This happens in both /start and Stepper. To trigger the offer I found that it is helpful to add a paid domain to the cart

Checklist

No response

Related

No response

[renancarvalho]

I conducted an investigation into the issue where the "Oferta" badge overlaps with the domain name.

The main cause of this overlap is a CSS rule that prevents domain titles (in this case, domain names) from breaking into multiple lines. This rule is intended to maintain readability, ensuring the full address appears on a single line, such as travis.a8c.testing+2024-signup-tester-stepper1@gmail.com, rather than splitting it into something like this:

rvis.a8c.testing+2024
-signup-tester-stepper1@gmail.com

However, this issue is more pronounced on mobile devices or smaller screens. I believe it’s crucial to consult designers on this matter. In my opinion, resolving this is essential.

[nuriapenya]

Hey @renancarvalho 👋🏽

If we follow the same logic of the highlighted cards, the badge is stacked on top of a domain name when a domain name is too long. We could try something like this:

Alternatively, we could stack the label on top of the offer message. This is a bit inconsistent with the highlighted domains on top of the list, but to me it connects better the badge + message, all in the same place:

WDYT?

[renancarvalho]

Hello @nuriapenya, this is sounds good to me. But the issue still there, specially on Mobile. The content gets expanded to accommodate the size of the domain name. In the screenshot below, there's a horizontal scroll.

[JanaMW27]

Hello! Thank you for the input @nuriapenya I agree with your proposed solution but/and I think we should have a max width for domain names and turn them into 2 lines if the name is very long.

[renancarvalho]

Hello @JanaMW27 👋 , I like this approach since, I think, this is a bit of an edge case. I've considered trimming/truncating, but I think this is more readable.

Shall we proceed with this approach?

[JanaMW27]

Sounds good to me

[renancarvalho]

@JanaMW27 and @nuriapenya , WDYT?

https://github.com/user-attachments/assets/b9420cbe-4ce6-4a5e-bed2-7352ef58a776

[JanaMW27]

I think there is too much spacing in the price module. Can we put the price in line with the domain name?