Reskinned Domain Picker: Unexpected line break in the domain list

[StefanNieuwenhuis]

Why

The unexpected line break in the middle of the "wordpress.com" subdomain, makes the UI less intuitive and therefore less usable.

What

In a nutshell, the WordPress.com subdomain option breaks oddly in the middle of “WordPress” and only goes back to one line if one makes the window wider (intuitive) or narrower (counterintuitive).

See pd2I8q-7N-p for context.

Acceptance Criteria

• [ ] Have the second column (price element) vertically aligned to center with the "Select" button @razvanpapadopol
• [ ] Price element should have no gap in the middle regardless of the length of the domain name (first column) @razvanpapadopol
• [ ] Always display "wordpress.com" subdomain or the TLD on a single line @alshakero

[ollierozdarz]

@StefanNieuwenhuis it looks like the latest round of improvements have fixed the initial width issues to a reasonable amount of length.

The main fix I see here is that the domain names should have a line-height of say, 24px, then be vertically aligned centre within their rows. Right now it looks like we're using line-height: 3rem; which is causing the large amount of leading (line-height) and visual issues when viewport width is reduced.

Screenshot from prod after changing the line-height to 24px:

[razvanpapadopol]

The main fix I see here is that the domain names should have a line-height of say, 24px

@ollierozdarz, https://github.com/Automattic/wp-calypso/pull/54120 should fix that 👌🏼

A couple points left to discuss:

• [ ] The domain name was already vertically aligned well with the "Select" button. However, we need to work a bit on the second column (price element) that sometimes shows a gap in the middle. If we remove that gap, "Free for the first year" won't be aligned to top with the domain name in some cases (2 lines vs 3 lines). Is that acceptable?

  

• [ ] Also, you can see in my screenshot that ".wordpress.com" and ".dental" are being cut off and this is what the current issue was initially about. There is no straightforward solution since we'll end up picking one of these two:

• current state

  

• if we force TLD In one word

  

[ollierozdarz]

The domain name was already vertically aligned well with the "Select" button. However, we need to work a bit on the second column (price element) that sometimes shows a gap in the middle. If we remove that gap, "Free for the first year" won't be aligned to top with the domain name in some cases (2 lines vs 3 lines). Is that acceptable?

@razvanpapadopol cool. Thanks for letting me know. Ideally the second column information would not have a gap in the middle and would stay vertically aligned center with the select button. Is that possible? 🙂

Quick example:

Also, you can see in my screenshot that ".wordpress.com" and ".dental" are being cut off and this is what the current issue was initially about. There is no straightforward solution since we'll end up picking one of these two:

I think the 'if we force TLD In one word' solution feels better, because that is arguable one of the most important parts of the string (the domain name), so not breaking up feels like the right choice to me.

[razvanpapadopol]

I think the 'if we force TLD In one word' solution feels better, because that is arguable one of the most important parts of the string (the domain name), so not breaking up feels like the right choice to me.

Yes, this was also the solution @alshakero added to /new