Menu name and action button too close in responsive below 500px.

[punit5658]

Menu name input and save menu too close below 500px. Added media styles for improve mobile accessibility to End user.

[punit5658]

Patch for Menu name and save button UI improvement.

[punit5658]

UI improvement for above case.

[joedolson]

Removing accessibility focus, as this is not an accessibility issue.

[punit5658]

Replying to joedolson:

Removing accessibility focus, as this is not an accessibility issue.

Thanks @joedolson for looking ticket and update focuses.

[afercia]

@punit5658 thanks and welcome to Trac.
Seems something worth fixing! However, a fixed value of 86px in width: calc( 100% - 86px ); doesn't take into account the label could be longer (or shorter) when translated in other languages. Just an example:

A more solid solution would probably be making the elements stacked vertically under a certain viewport width. There's no need for the label and the input field to be always on the same line also on small screens.

Also, you may want to have a look at the ​WordPress CSS coding standards about spaces, etc. Indentation should always use tab characters and not spaces, and every file should end with an empty line.

[punit5658]

Update input width because label width can change.

[punit5658]

Update space at bottom of file

[punit5658]

Thanks @afercia I have updated patch.

[punit5658]

Update space in css

[afercia]

Looks good to me. 41499.2.diff​ just uses the new rules when the responsive view kicks in and saves a media query. Also removes an unused rule and fixes one indentation (was using spaces instead of tabs).

[afercia]

In 41197:

Menus: Improve the responsive view for the Menu Name field and Save button.

Props punit5658.
Fixes #41499.