Make WordPress Core

Opened 23 months ago

Closed 4 months ago

Last modified 4 months ago

#48546 closed enhancement (fixed)

Styling of the posts and pages in the dashboard is not

Reported by: Y_Kolev Owned by: ryelle
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Posts, Post Types Keywords: has-patch
Focuses: ui, css, administration Cc:


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

Attachments (4)

grid.png (358.0 KB) - added by Y_Kolev 23 months ago.
removed grid.png (382.5 KB) - added by Y_Kolev 23 months ago.
with disabled grid
48546.patch (461 bytes) - added by aliveic 23 months ago.
A patch by using the flex approach.
48546.diff (475 bytes) - added by aliveic 23 months ago.
A patch by retaining the grid approach.

Download all attachments as: .zip

Change History (12)

23 months ago

23 months ago

with disabled grid

#1 @SergeyBiryukov
23 months ago

  • Component changed from Administration to Posts, Post Types
  • Focuses administration added

#2 @aliveic
23 months ago

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

Last edited 23 months ago by aliveic (previous) (diff)

23 months ago

A patch by using the flex approach.

23 months ago

A patch by retaining the grid approach.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.

9 months ago

#5 @sabernhardt
9 months ago

  • Focuses css added
  • Keywords has-patch needs-refresh added
  • Milestone changed from Awaiting Review to Future Release

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.

#6 @sabernhardt
4 months ago

A flexbox option PR 825 was added on ticket #47895

#7 @ryelle
4 months ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

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.

#8 @sabernhardt
4 months ago

  • Keywords needs-refresh removed
  • Milestone changed from Future Release to 5.8
Note: See TracTickets for help on using tickets.