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

[passoniate]

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

[afercia]

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]

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

[afercia]

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]

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.

[hellofromTonya]

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

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

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

Marking this for commit.

[helen]

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.

[SergeyBiryukov]

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​.

[SergeyBiryukov]

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.