Domains step: Improve domain title spacing on smaller screens

[renancarvalho]

Related to #94426
Fixes #94426

Proposed Changes

• There are spacing issues when users choose excessively long domain names or titles. This affects both mobile and desktop views, with the main problem being the content growing too large to fit properly.

This PR addresses the issue by repositioning the 'deal' badges above the title and ensuring that overly long titles are automatically broken into multiple lines for better readability and layout.

Issue

Fix

Why are these changes being made?

• Fixes this layout issue

Testing Instructions

• Navigate to any flow (e.g., /setup/onboarding/domains) and proceed to the domains step.

• Select an excessively long domain name and verify that the layout remains intact (compare it with the production version).

• Ensure the domain grid matches the provided screenshots.

• Compare it with the /start/onboarding flow and confirm that the horizontal scroll issue has been resolved, especially on mobile or smaller screens.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120336

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120336&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120336&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~22 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
videopress-flow            +148 B  (+0.0%)      +22 B  (+0.0%)
update-design-flow         +148 B  (+0.0%)      +22 B  (+0.0%)
sensei-flow                +148 B  (+0.0%)      +22 B  (+0.0%)
link-in-bio-tld-flow       +148 B  (+0.0%)      +22 B  (+0.0%)
domains                    +148 B  (+0.0%)      +22 B  (+0.0%)
copy-site-flow             +148 B  (+0.0%)      +22 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~22 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
async-load-signup-steps-domains       +148 B  (+0.0%)      +22 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/domains_mobile_layout on your sandbox.

[renancarvalho]

@JanaMW27 or @nuriapenya would you be interested in taking a look at this one? You can easily do that with the live link and following the testing steps.
🙇

[escapemanuele]

Thanks for working on this!

In the en version I see the sale text on two lines

That is probably breaking the design (as the price should be in line with the domain)

[renancarvalho]

Thanks for working on this!

In the en version I see the sale text on two lines

That is probably breaking the design (as the price should be in line with the domain)

Addressed. Thank you!

[escapemanuele]

Trying with a long domain name I now see it like this. Maybe 3 rows is too much?

Max length of the domain in the input is 60 characters, can we have it in 2 rows?

And the price should be in line with the domain name, with the offer copy in line with the Sale text.

[JanaMW27]

I think setting up a max width for the domain and then domain name to other lines is a good logic to put in place to cover this edge cases.

[escapemanuele]

Stepper now works great!

On /start there is some visual error though

[escapemanuele]

Now it is working great! 👏