WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 9 days 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 12 months ago.
menucheck.png (18.7 KB) - added by passoniate 12 months ago.
49245.patch (389 bytes) - added by mukesh27 12 months ago.
A patch that fixed button alignment.
Responsive design.png (24.7 KB) - added by mukesh27 12 months ago.
Screenshot_20200121-175044.png (91.2 KB) - added by passoniate 12 months ago.
Respectable @mukesh27 when i click on checkboxes then this issue will appear
49245.show-overflow-always.patch (514 bytes) - added by sabernhardt 8 weeks ago.
removing overflow: hidden from .menu-settings-group container
49245.show-overflow-on-mobile.patch (527 bytes) - added by sabernhardt 8 weeks ago.
resets overflow to show at narrower widths
Capture d’écran 2021-01-07 à 00.08.03.png (71.7 KB) - added by audrasjb 3 weeks ago.
Before 49245.show-overflow-on-mobile.patch
Capture d’écran 2021-01-07 à 00.11.31.png (71.8 KB) - added by audrasjb 3 weeks ago.
After 49245.show-overflow-on-mobile.patch
checkboxes-before-patch-firefox.png (9.7 KB) - added by sabernhardt 2 weeks 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 2 weeks ago.
after 49245.show-overflow-on-mobile.patch: checkbox focus outline and borders in Firefox
menu.PNG (12.8 KB) - added by Boniu91 9 days ago.
menu2.PNG (13.0 KB) - added by Boniu91 9 days ago.

Download all attachments as: .zip

Change History (28)

#1 @SergeyBiryukov
12 months ago

  • Component changed from General to Menus
  • Focuses administration added

@mukesh27
12 months ago

A patch that fixed button alignment.

#2 @mukesh27
12 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
12 months ago

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

#3 @afercia
12 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.


11 months ago

#5 @afercia
11 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.


3 months ago

@sabernhardt
8 weeks ago

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

@sabernhardt
8 weeks ago

resets overflow to show at narrower widths

#7 @sabernhardt
8 weeks 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
6 weeks ago

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

#9 @sabernhardt
6 weeks ago

#52058 was marked as a duplicate.

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


5 weeks ago

@audrasjb
3 weeks ago

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

@audrasjb
3 weeks ago

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

#11 @audrasjb
3 weeks 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
2 weeks ago

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

@sabernhardt
2 weeks ago

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

#12 @sabernhardt
2 weeks 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.


9 days ago

@Boniu91
9 days ago

@Boniu91
9 days ago

#14 @Boniu91
9 days ago

Worked as expected (Chrome, Firefox, Edge)

#15 @SergeyBiryukov
9 days 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.