WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#32813 closed defect (bug) (fixed)

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

Reported by: akibjorklund Owned by: 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 4 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 4 years ago.
32813.3.diff (752 bytes) - added by andg 4 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 4 years ago.

Download all attachments as: .zip

Change History (15)

@andg
4 years ago

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

#2 @andg
4 years ago

  • Keywords has-patch added

@metodiew
4 years ago

#3 @metodiew
4 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
4 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
4 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
4 years ago

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

#6 @celloexpressions
4 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
4 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.


4 years ago

#9 @helen
4 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
4 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
4 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.