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

[akibjorklund]

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

[akibjorklund]

Related: #32771

[andg]

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

[metodiew]

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.

[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?

[metodiew]

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]

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

[celloexpressions]

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

[metodiew]

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

[helen]

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.

[helen]

In 33107:

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

props andg, metodiew.
fixes #32813.

[helen]

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.