"customize your site"-button overlaps column

[pixolin]

Dashboard has a "Welcome to WordPress"-section that comes with a button "customize your site".

While this button perfectly fits in the column untranslated, depending on screen size it overlaps when translated e.g. into the much longer "Dein WordPress individualisieren". (An image that shows the overlapping can be found at ​https://imgur.com/I6AazLv)

To my understanding, this could be fixed by setting a max-width to the button's CSS class:

.wp-core-ui .button-group.button-hero .button, .wp-core-ui .button.button-hero { 
  max-width: 100%; }

[shooper]

Created a patch that gets this partially fixed. See: ​http://imgur.com/pVvH0vx

Line height is off when it wraps now. Not sure how to handle this. Over to someone else with better CSS chops :)

[zodiac1978]

For German this is fixed now by changing the string on GlotPress.

But the CSS from @shooper looks fine and would be a more bulletproof version for this button.

[SergeyBiryukov]

29451.patch​ fixes the line height: 29451.png​.

[SergeyBiryukov]

In 29790:

Account for longer translations of 'Customize Your Site' button label.

props shooper.
fixes #29451.

[zodiac1978]

I don't know if this comment from Helen is relevant here, but maybe switch to em insteadt of pixel?
https://core.trac.wordpress.org/ticket/23189#comment:4

[SergeyBiryukov]

Yeah, I guess we should use em for line-height.

[janhenckens]

Changed to line-height to use em's instead of pixels, patch added.

[afercia]

the button font size is 14px (not 13px)
the last patch sets a line-height of 1.538em
thus the computed line height value would be 21.532px (in Chrome dev tools inspector is 21.5319995880127px)

if you want a computed value of 20px, then the magic number is 1.4285714 (unitless is better)

[janhenckens]

Thanks for the suggestion afercia! New patch has the correct unitless value.

[SergeyBiryukov]

In 29828:

Switch line-height added in [29790] to a unitless value.

props janhenckens.
fixes #29451.