WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#29451 closed defect (bug) (fixed)

"customize your site"-button overlaps column

Reported by: pixolin Owned by: SergeyBiryukov
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui, administration Cc:

Description

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%; }


Attachments (5)

dashboard.css.patch (429 bytes) - added by shooper 6 years ago.
29451.png (18.9 KB) - added by SergeyBiryukov 6 years ago.
29451.patch (451 bytes) - added by SergeyBiryukov 6 years ago.
29451.2.patch (323 bytes) - added by janhenckens 6 years ago.
29451.3.patch (325 bytes) - added by janhenckens 6 years ago.

Download all attachments as: .zip

Change History (17)

#1 @SergeyBiryukov
6 years ago

  • Component changed from Formatting to Administration
  • Focuses ui administration added; accessibility removed

#2 @helen
6 years ago

  • Version changed from trunk to 3.8

#3 @shooper
6 years ago

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 :)

#4 @zodiac1978
6 years ago

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.

Last edited 6 years ago by zodiac1978 (previous) (diff)

@SergeyBiryukov
6 years ago

#5 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 4.1

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

#6 @SergeyBiryukov
6 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 29790:

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

props shooper.
fixes #29451.

#7 @zodiac1978
6 years ago

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

#8 @SergeyBiryukov
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Yeah, I guess we should use em for line-height. Related: #7296.

Last edited 6 years ago by SergeyBiryukov (previous) (diff)

@janhenckens
6 years ago

#9 @janhenckens
6 years ago

  • Keywords has-patch added

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

#10 @afercia
6 years ago

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
6 years ago

#11 @janhenckens
6 years ago

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

#12 @SergeyBiryukov
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29828:

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

props janhenckens.
fixes #29451.

Note: See TracTickets for help on using tickets.