WordPress.org

Make WordPress Core

Opened 12 months ago

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

Download all attachments as: .zip

Change History (25)

@passoniate
12 months ago

@passoniate
12 months ago

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

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


11 months ago

#4 @afercia
11 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
5 months ago

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

#6 @afercia
5 months ago

  • Milestone changed from Future Release to 5.6

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


4 months ago

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


4 months ago

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


3 months ago

#10 @ryokuhi
3 months ago

  • Keywords has-patch needs-testing added

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


3 months ago

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