WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 3 days ago

#49576 assigned defect (bug)

Menu Editor UI issues on med-large screens

Reported by: garrett-eclipse Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots has-patch commit
Focuses: ui, css Cc:

Description (last modified by garrett-eclipse)

Hello,

Just reporting two UI issues with the Menu Editor;

  1. On screens not quite on the medium breakpoint but not too wide you'll find the 'Save Menu' button falls directly below the Menu Name input.

https://core.trac.wordpress.org/raw-attachment/ticket/49576/Screen%20Shot%202020-03-03%20at%202.05.04%20PM.png
*This is worst when the button is focused as the input overlaps the button.
https://core.trac.wordpress.org/raw-attachment/ticket/49576/Screen%20Shot%202020-03-03%20at%202.05.15%20PM.png

  1. On larger screens when the input is beside the button you'll find the button is slightly larger.

https://core.trac.wordpress.org/raw-attachment/ticket/49576/Screen%20Shot%202020-03-03%20at%202.05.43%20PM.png
*I've seen a few tickets flagging other parts of the UI for similar issues.

Thanks

Attachments (6)

Screen Shot 2020-03-03 at 2.05.04 PM.png (14.1 KB) - added by garrett-eclipse 6 weeks ago.
Create Menu directly up against Menu Name input on med-large screens.
Screen Shot 2020-03-03 at 2.05.15 PM.png (12.1 KB) - added by garrett-eclipse 6 weeks ago.
Button w/ focus overlapped by Menu Name input.
Screen Shot 2020-03-03 at 2.05.43 PM.png (11.3 KB) - added by garrett-eclipse 6 weeks ago.
Save Menu button is slightly larger in height compared to the Menu Name input
49576.patch (514 bytes) - added by man4toman 3 days ago.
49576.1.diff (558 bytes) - added by audrasjb 3 days ago.
Menus: Fixes menu editor responsive issues on med-large screens
12751439cf15f02258a8ac103389072c.gif (1.4 MB) - added by audrasjb 3 days ago.
After 59576.1.diff

Download all attachments as: .zip

Change History (15)

@garrett-eclipse
6 weeks ago

Create Menu directly up against Menu Name input on med-large screens.

@garrett-eclipse
6 weeks ago

Button w/ focus overlapped by Menu Name input.

@garrett-eclipse
6 weeks ago

Save Menu button is slightly larger in height compared to the Menu Name input

#1 @garrett-eclipse
6 weeks ago

  • Description modified (diff)

#2 @garrett-eclipse
6 weeks ago

#48430 is similar to item 2 I mentioned

Last edited 6 weeks ago by garrett-eclipse (previous) (diff)

#3 @audrasjb
12 days ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Owner set to audrasjb
  • Status changed from new to assigned

#4 follow-up: @man4toman
3 days ago

It happens between 783px to 852px.

@man4toman
3 days ago

#5 @man4toman
3 days ago

  • Keywords has-patch needs-testing added; needs-patch removed

#6 in reply to: ↑ 4 @JavierCasares
3 days ago

Replying to man4toman:

It happens between 783px to 852px.

It happens to me at 783-852, and 961-976.

The patch fixed the first one, but not the second one... :(

@audrasjb
3 days ago

Menus: Fixes menu editor responsive issues on med-large screens

#7 @audrasjb
3 days ago

  • Keywords needs-testing removed

Thanks for your patch @man4toman,

I updated the patch, in 49576.1.diff:

  • change media query’s values to (min-width: 783px) and (max-width: 870px) to handle more use cases
  • some coding standards fixes

I think it's good to go now, thanks!
Adding a screenshot and commit keyword.

Cheers,
Jb

@audrasjb
3 days ago

After 59576.1.diff

#8 @audrasjb
3 days ago

  • Keywords commit added

#9 @man4toman
3 days ago

@JavierCasares Yes you right, I missed second one.

Thanks @audrasjb, updated patch works fine.

Note: See TracTickets for help on using tickets.