Styling of the posts and pages in the dashboard is not

[Y_Kolev]

If you open the list with all pages or all posts on WP version 5.4-alpha-46582-src
All the buttons below each post are not properly aligned, and there is too much between each other. This issue comes from the added display: grid;

Screenshot - ​http://prntscr.com/pukqwh
Screenshot without the display: grid - ​http://prntscr.com/pukqnn

[Y_Kolev]

with disabled grid

[aliveic]

This patch uses a basic approach of changing the display property to flex and adding a flex-wrap: wrap to the instance as can be seen in the attached file. However this is a major change of the display:grid logic so I will also upload a second patch which fixes the issue by utilizing the 'grid'.

Feel free to comment.

#wordcamp #wordcampsofia #wcsof

[aliveic]

A patch by using the flex approach.

[aliveic]

A patch by retaining the grid approach.

[sabernhardt]

Related: #47895

[sabernhardt]

I'd like to see an iteration (or more than one) on the flexbox approach. It still would need something else—possibly a min-width, larger side margin, or a flex-based property with enough browser support.

The display: flex and flex-wrap parts could replace the grid styles within the current body:not(.plugins-php) .row-actions selector.

[sabernhardt]

A flexbox option ​PR 825 was added on ticket #47895

[ryelle]

In 51073:

List Tables: Update spacing in action items on small screens.

Switch the display to flex. The action items use their intrinsic space, rather than a fixed grid, which prevents too much space between items on larger mobile screens.

Props arunsathiya, sabernhardt, danfarrow, notlaura, aliveic, y_kolev
Fixes #48546, #47895.