Make WordPress Core

Opened 5 years ago

Closed 3 years ago

Last modified 3 years ago

#48546 closed enhancement (fixed)

Styling of the posts and pages in the dashboard is not

Reported by: y_kolev's profile Y_Kolev Owned by: ryelle's profile 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 -
Screenshot without the display: grid -

Attachments (4)

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

Download all attachments as: .zip

Change History (12)

5 years ago

5 years ago

with disabled grid

#1 @SergeyBiryukov
5 years ago

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

#2 @aliveic
5 years 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 5 years ago by aliveic (previous) (diff)

5 years ago

A patch by using the flex approach.

5 years ago

A patch by retaining the grid approach.

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

4 years ago

#5 @sabernhardt
4 years 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
3 years ago

A flexbox option PR 825 was added on ticket #47895

#7 @ryelle
3 years 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
3 years ago

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