WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 2 weeks ago

#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 10 months ago.
page.png (21.6 KB) - added by passoniate 10 months ago.
49246.diff (311 bytes) - added by anuj2 9 months ago.
page-design.png (81.4 KB) - added by rolfsiebers 2 months ago.
49246.2.diff (1.1 KB) - added by rolfsiebers 2 months ago.
Capture d’écran 2020-10-11 à 00.32.15.png (32.4 KB) - added by audrasjb 3 weeks ago.
Before patch
Capture d’écran 2020-10-11 à 00.32.52.png (59.3 KB) - added by audrasjb 3 weeks ago.
After patch
49246.3.diff (1.7 KB) - added by SergeyBiryukov 2 weeks ago.
49246.3.png (30.6 KB) - added by SergeyBiryukov 2 weeks ago.

Download all attachments as: .zip

Change History (25)

@passoniate
10 months ago

@passoniate
10 months ago

#1 @afercia
9 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
9 months ago

#2 @anuj2
9 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.


8 months ago

#4 @afercia
8 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 :)

@rolfsiebers
2 months ago

#5 @rolfsiebers
2 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 2 months ago by rolfsiebers (previous) (diff)

#6 @afercia
2 months ago

  • Milestone changed from Future Release to 5.6

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


7 weeks ago

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


5 weeks ago

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


3 weeks ago

#10 @ryokuhi
3 weeks ago

  • Keywords has-patch needs-testing added

#11 @hellofromTonya
3 weeks 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
3 weeks 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.


2 weeks ago

#14 @helen
2 weeks 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
2 weeks 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
2 weeks 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.