Issue on mobile device in user listing page

[sumitsingh]

I think we need to space on both filters. More information see SS.

[sumitsingh]

Button Issue ss

Trac ticket: https://core.trac.wordpress.org/ticket/54813

[shreyasikhar26]

Added patch file with the changes required

[shreyasikhar26]

Screenshot after applying the changes from the patch 54813.diff

[sabernhardt]

item count overlapping Change button at 600px wide

[sabernhardt]

Thanks for the patch!

There still is a related issue with the item count overlapping the Change button at certain widths. I think I have seen that before on another ticket, but I am unable to find it now. (The overlap could be fixed separately.)

Fixes spacing issue between action buttons on Users list table page. Issue occurs on the mobile devices.
10px margin bottom added to match the bottom input and search spacing.

Trac ticket: 54813

Screenshot after applying the change:

Unwanted commits are pushed. So closing this one.

Fixes spacing issue between action buttons on Users list table page. Issue occurs on the mobile devices.
10px margin bottom added to match the bottom input and search spacing.

Trac ticket: 54813

Screenshot after applying the change:

[sabernhardt]

option to fix both the margin and the positioning overlap

[sabernhardt]

stacking actions controls on screens up to 782px wide with 54813.2.diff

[sabernhardt]

adding a small bottom margin to the select element could help with certain languages on small screens (54813.2.diff)

[sabernhardt]

PR 3239 is a viable option; I agree that the distance between these controls should be (at least) as much as the distance between the User search input and its button.

However, I suggest using 54813.2.diff​ to fix the absolute positioning overlap, together with the margin fix. It clears the float on the second .actions element and only adds a margin on that. For languages with wider controls, the patch includes a bottom margin for the select elements in case the button wraps to the next line on small screens, to give a little space for focus outlines.

Both patch options increase empty space before the Search on other list tables screens: 10 pixels with the PR, 15 pixels with the .diff patch. (The second .actions element has no content on those screens, but it is not exactly empty to use the CSS :empty in 54813.2.diff.)

[audrasjb]

Self assigning for final review, testing and hopefully, commit.

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

In 54429:

Users: Fix Users list bottom filters margins on small screens.

This changeset fixes bottom filters margins of the Users list screen on small screens.

Props sumitsingh, sabernhardt, shreyasikhar26, audrasjb.
Fixes #54813.