Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#32813 closed defect (bug) (fixed)

Customizer Menus: Focus style of Edit Menu Item arrow overlaps with item type label

Reported by: akibjorklund's profile akibjorklund Owned by: helen's profile helen
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

Narrowing the open/close button a few pixels would solve the issue.

Attachments (4)

32813.diff (752 bytes) - added by andg 10 years ago.
Adding 5 more pixels to the right/left in rtl/non rtl cases should perhaps do it.
32813.2.diff (712 bytes) - added by metodiew 10 years ago.
32813.3.diff (752 bytes) - added by andg 10 years ago.
Increased horizontal padding to 22px for both the rtl/non rtl version.
customizer-nav-menu-before-after.png (40.3 KB) - added by metodiew 10 years ago.

Download all attachments as: .zip

Change History (15)

@andg
10 years ago

Adding 5 more pixels to the right/left in rtl/non rtl cases should perhaps do it.

#2 @andg
10 years ago

  • Keywords has-patch added

@metodiew
10 years ago

#3 @metodiew
10 years ago

I didn't saw the previous patch before I attached mine - some strange caching issue maybe? But in my patch I'm using 25px, because 20px are not enough for me.

#4 follow-up: @andg
10 years ago

The more the padding is, the less the space for menu item label, so probably we should stick to something like in between 20 and 25 pixels?

#5 in reply to: ↑ 4 @metodiew
10 years ago

Replying to andg:

The more the padding is, the less the space for menu item label, so probably we should stick to something like in between 20 and 25 pixels?

I agree. The first time when I tested it with 20px the space wasn't enough (for me) and that's why I used 25px. Something like 22-23px maybe would be enough to fix the issue and leave enough space for menu item label.

@andg
10 years ago

Increased horizontal padding to 22px for both the rtl/non rtl version.

#6 @celloexpressions
10 years ago

  • Milestone changed from Awaiting Review to 4.3

Screenshots, please. Would like to keep it as square-looking/centered as possible while avoiding overlap.

#7 @metodiew
10 years ago

Attached screenshot: Ubuntu, Chrome Version 43.0.2357.130 (64-bit)

This ticket was mentioned in Slack in #core by jorbin. View the logs.


10 years ago

#9 @helen
10 years ago

Just a note that you don't need to patch the RTL versions, as they are built. If you aren't patching from the src directory in the develop repo, also consider moving to that.

#10 @helen
10 years ago

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

In 33107:

Menu customizer: Ensure item type doesn't collide with the handle focus glow.

props andg, metodiew.
fixes #32813.

#11 @helen
10 years ago

I split the difference and went with 21px, which worked for me in testing across a few browsers. 20px was enough space but a little too close for legibility.

Note: See TracTickets for help on using tickets.