Site Settings: "Add a Custom Address" button wraps to multiple lines

[mattmiklic]

The "Add a Custom Address" button on Site > Settings > General makes assumptions about the length of the button text and the width of the viewport that aren't always true. In English, the button wraps to multiple lines if the browser window is at certain widths. The button wraps to multiple lines at any width in most of the "popular languages" in Calypso.

Because the height of the input matches the height of the button, it grows very large in some languages. The multiple-line button looks particularly awkward because the second line sits below the + icon on the top line. Perhaps there's a better way to float this button, or it should be displayed below the input?

[lancewillett]

Bug scrub note: reported issue is still valid. In addition, not just with long domain names or other languages — the same issue occurs in smaller screen sizes such as tablets and small laptops.

[lancewillett]

See also a similar report (closed as duplicate): #8112

Settings: Site Address button label has a line break
Happens in viewports that are about <1065px. This causes the Site Address field to look really large:

[jsnmoon]

I can confirm that this is still an issue. Using a default zoom, the issue occurs when the viewport is between 661px and 1051px in width.

I propose that we fix this by removing this button altogether. The action links below the disabled input already handles "Add[ing] a Custom Address", after all.

An alternative fix would be to force this form section to stack at 1040px instead of 660px as it currently does. Doing so looks like the following:

This has its tradeoffs: The interface still overflows from 1041px to 1051px and looks a bit awkward between 661px and 1040px. Nonetheless, it does prevent the button from growing vertically.

[lancewillett]

Closing this due to inactivity. Please re-open if we decide to further improve the layout of this button.

Here are two screenshots for reference, Safari desktop on macOS.

Larger viewport

Smaller viewport