WordPress.org

Make WordPress Core

#49246 closed defect (bug) (fixed)

Page, Post and Comments admin screens: issue on small screens

Reported by: passoniate Owned by: audrasjb
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, css Cc:

Description

when trash a comment, page or post then number of items overlap to button

Attachments (9)

comment.png (21.7 KB) - added by passoniate 23 months ago.
page.png (21.6 KB) - added by passoniate 23 months ago.
49246.diff (311 bytes) - added by anuj2 22 months ago.
page-design.png (81.4 KB) - added by rolfsiebers 15 months ago.
49246.2.diff (1.1 KB) - added by rolfsiebers 15 months ago.
Capture d’écran 2020-10-11 à 00.32.15.png (32.4 KB) - added by audrasjb 14 months ago.
Before patch
Capture d’écran 2020-10-11 à 00.32.52.png (59.3 KB) - added by audrasjb 14 months ago.
After patch
49246.3.diff (1.7 KB) - added by SergeyBiryukov 14 months ago.
49246.3.png (30.6 KB) - added by SergeyBiryukov 14 months ago.

Download all attachments as: .zip

Change History (25)

@passoniate
23 months ago

@passoniate
23 months ago

#1 @afercia
22 months ago

  • Version 5.3.2 deleted

Note: this happens also on WordPress 5.2 and previous versions. As far as I can tell, the number of items has always been positioned absolutely, which is the root cause of the issue.

@anuj2
22 months ago

#2 @anuj2
22 months ago

Just add a right margin to the button 'Empty Trash'.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


21 months ago

#4 @afercia
21 months ago

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

This ticket was discussed during today's accessibility bug-scrub: overlapping text is an accessibility issue but agreed this would need some design feedback to start with and the CSS team to explore solutions :)

#5 @rolfsiebers
15 months ago

We've made a design that could possible work. We moved the num of items to the top and hid the bottom one. I've also attached a .diff file with the changes that need to be made.

Also props to:
@uxkai
@ireneyoast
@thijsvanloef

Made on the Yoast contributor day.

Last edited 15 months ago by rolfsiebers (previous) (diff)

#6 @afercia
15 months ago

  • Milestone changed from Future Release to 5.6

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


15 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


14 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


14 months ago

#10 @ryokuhi
14 months ago

  • Keywords has-patch needs-testing added

#11 @hellofromTonya
14 months ago

  • Keywords needs-design-feedback removed

Capturing notes from today's Accessibility scrub:

Removing needs-design-feedback per @afercia:

If we don't change the placement, I don't think it needs design feedback.

If placement is changed, please re-add the keyword.

Per @audrasjb:

I can test the patch later today

#12 @audrasjb
14 months ago

  • Keywords commit added; needs-testing removed

I tested the proposed patch and it looks good to me (see above screenshots).

Marking this for commit.

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


14 months ago

#14 @helen
14 months ago

I don't really love the idea of taking up more vertical real estate but short of tackling the whole subnav header holistically this is probably as good as we'll get for now.

#15 @SergeyBiryukov
14 months ago

Having extensively tested the patch on various screens, with and without multiple pages, took a slightly different approach.

49246.3.diff maintains the current position of the items count (below the table), and only wraps it to a new line when necessary. Also brings some consistency to bottom paddings across various screens (Posts, Tags, Comments, Users), while we're at it.

Screenshots, with and without pagination: 49246.3.png.

#16 @SergeyBiryukov
14 months ago

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

In 49178:

Administration: Wrap the list table items count to a new line on small screens.

This avoids overlapping with action buttons and brings some consistency to bottom paddings across various screens.

Props passoniate, afercia, anuj2, rolfsiebers, uxkai, ireneyoast, thijsvanloef, hellofromTonya, audrasjb, helen, SergeyBiryukov.
Fixes #49246.

Note: See TracTickets for help on using tickets.