WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 8 months ago

#49245 closed defect (bug) (fixed)

Menu admin screens: button issue on small screens

Reported by: passoniate Owned by: sabernhardt
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots has-patch commit
Focuses: ui, css Cc:

Description

Menu admin screens: button issue on small screens

Attachments (13)

menubutton.png​ (23.6 KB) - added by passoniate 20 months ago.
menucheck.png​ (18.7 KB) - added by passoniate 20 months ago.
49245.patch​ (389 bytes) - added by mukesh27 20 months ago.
A patch that fixed button alignment.
Responsive design.png​ (24.7 KB) - added by mukesh27 20 months ago.
Screenshot_20200121-175044.png​ (91.2 KB) - added by passoniate 20 months ago.
Respectable @mukesh27 when i click on checkboxes then this issue will appear
49245.show-overflow-always.patch​ (514 bytes) - added by sabernhardt 10 months ago.
removing overflow: hidden from .menu-settings-group container
49245.show-overflow-on-mobile.patch​ (527 bytes) - added by sabernhardt 10 months ago.
resets overflow to show at narrower widths
Capture d’écran 2021-01-07 à 00.08.03.png​ (71.7 KB) - added by audrasjb 8 months ago.
Before 49245.show-overflow-on-mobile.patch
Capture d’écran 2021-01-07 à 00.11.31.png​ (71.8 KB) - added by audrasjb 8 months ago.
After 49245.show-overflow-on-mobile.patch
checkboxes-before-patch-firefox.png​ (9.7 KB) - added by sabernhardt 8 months ago.
before 49245.show-overflow-on-mobile.patch: checkbox focus cutoff on left, Firefox also cuts off top border
checkboxes-after-patch-firefox.png​ (9.9 KB) - added by sabernhardt 8 months ago.
after 49245.show-overflow-on-mobile.patch: checkbox focus outline and borders in Firefox
menu.PNG​ (12.8 KB) - added by Boniu91 8 months ago.
menu2.PNG​ (13.0 KB) - added by Boniu91 8 months ago.

Download all attachments as: .zip

Change History (28)

@passoniate
20 months ago

@passoniate
20 months ago

#1 @SergeyBiryukov
20 months ago

  • Component changed from General to Menus
  • Focuses administration added

@mukesh27
20 months ago

A patch that fixed button alignment.

@mukesh27
20 months ago

#2 @mukesh27
20 months ago

  • Keywords has-patch added
  • Version 5.3.2 deleted

@passoniate I can't replicate the checkbox issue in windows 10 responsive design.

@passoniate
20 months ago

Respectable @mukesh27 when i click on checkboxes then this issue will appear

#3 @afercia
20 months ago

The focus outline on the checkboxes is cut-off on the left because one of the ancestor elements (.menu-settings-group) has overflow: hidden.

This has always been the case in all previous WP versions. If used to contain floated elements, overflow: hidden should be replaced with less invasive methods e.g. by using the CSS class wp-clearfix (needs investigation).

This ticket was mentioned in ​Slack in #accessibility by afercia. ​View the logs.
19 months ago

#5 @afercia
19 months ago

  • Focuses accessibility administration removed

This ticket was discussed during today's accessibility bug-scrub: not sure this issue relates to web accessibility. Seems more related to UI consistency / design. Updating the ticket properties accordingly.

This ticket was mentioned in ​Slack in #core-css by sabernhardt. ​View the logs.
11 months ago

@sabernhardt
10 months ago

removing overflow: hidden from .menu-settings-group container

@sabernhardt
10 months ago

resets overflow to show at narrower widths

#7 @sabernhardt
10 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release

With Windows browsers in English, I don't see any need to hide the overflow, even on larger screens. 49245.show-overflow-always.patch​ simply removes overflow: hidden from the container.

If there is a problem with floating, however, floats are removed for mobile screens anyway. 49245.show-overflow-on-mobile.patch​ continues to hide the overflow at larger sizes and shows it for smaller sizes.

#8 @sabernhardt
9 months ago

  • Milestone changed from Future Release to 5.7
  • Owner set to sabernhardt
  • Status changed from new to assigned

#9 @sabernhardt
9 months ago

#52058 was marked as a duplicate.

This ticket was mentioned in ​Slack in #core-css by sabernhardt. ​View the logs.
9 months ago

@audrasjb
8 months ago

Before 49245.show-overflow-on-mobile.patch

@audrasjb
8 months ago

After 49245.show-overflow-on-mobile.patch

#11 @audrasjb
8 months ago

  • Keywords commit added; needs-testing removed

49245.show-overflow-on-mobile.patch for @sabernhardt still applies cleanly and fixes the issue (see above screenshots). Marking this for commit.

@sabernhardt
8 months ago

before 49245.show-overflow-on-mobile.patch: checkbox focus cutoff on left, Firefox also cuts off top border

@sabernhardt
8 months ago

after 49245.show-overflow-on-mobile.patch: checkbox focus outline and borders in Firefox

#12 @sabernhardt
8 months ago

Screenshots added for the checkbox portion of the patch.

By not hiding the overflow, this would also fix the similar Firefox border issue reported on #51706.

This ticket was mentioned in ​Slack in #core by monikarao. ​View the logs.
8 months ago

@Boniu91
8 months ago

@Boniu91
8 months ago

#14 @Boniu91
8 months ago

Worked as expected (Chrome, Firefox, Edge)

#15 @SergeyBiryukov
8 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 49964:

Menus: Fix minor UI issues on Edit Menus screen on smaller viewports.

This removes extra margin from the Select button and ensures the checkboxes in the Menu Settings section are fully visible.

Props sabernhardt, passoniate, mukesh27, afercia, audrasjb, Boniu91, ravipatel, jomisica.
Fixes #49245, #51706.

Note: See TracTickets for help on using tickets.