Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (25)

@passoniate
2 years ago

@passoniate
2 years ago

#1 @afercia
2 years 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
2 years ago

#2 @anuj2
2 years ago

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

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


23 months ago

#4 @afercia
23 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
17 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.

Version 0, edited 17 months ago by rolfsiebers (next)

#6 @afercia
17 months ago

  • Milestone changed from Future Release to 5.6

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


17 months ago

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


16 months ago

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


16 months ago

#10 @ryokuhi
16 months ago

  • Keywords has-patch needs-testing added

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


16 months ago

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