Columns Width-CSS Problem in Post and Page List Table

[lospeso]

https://core.trac.wordpress.org/newticket

The width of the columns in the Post or Page table list is causing display issues in WordPress. This is especially when plugins, like Yoast, add columns.

The current CSS WordPress uses to display the table list of post or pages ends up creating a poor column layout display.

The CSS is coming from this WordPress File:

/wp-admin/load-styles.php

These are the "ISSUE" CSS entries:

.fixed .column-author, .fixed .column-format, .fixed .column-links, .fixed .column-parent, .fixed .column-posts {
    width: 10%;
}
.fixed .column-categories, .fixed .column-rel, .fixed .column-response, .fixed .column-role, .fixed .column-tags {
    width: 15%;
}
.fixed .column-date {
    width: 14%;
}

Here is the "FIX" I applied:

.fixed .column-author, .fixed .column-format, .fixed .column-links, .fixed .column-parent, .fixed .column-posts {
width: auto !important;
}
.fixed .column-categories, .fixed .column-rel, .fixed .column-response, .fixed .column-role, .fixed .column-tags {
width: auto !important;
}
.fixed .column-date {
width: auto !important;
}

I had use "Important" because I applied the fix using a browser extension called "Stylus", which allows me to use Custom CSS and apply it to any page the browser displays.

I tested this fix in other WordPress installations and the fix works fine.

The issue is certain columns were given widths of a certain size, instead of allowing the browser to automatically adjust the columns.

You can see the difference in the screenshots I created and named them accordingly (Issue & Fix) to match the above CSS I posted.

Images:
(1) 20210102-ISSUE-Current-Columns-Width-Post-List-Page.jpg

See Here: ​https://prnt.sc/y1r9nc

(2) 20210102-FIX-Current-Columns-Width-Post-List-Page.jpg

See here: ​https://prnt.sc/y1rd5i

Thank-you.

[sabernhardt]

Related issue, but not an exact duplicate: #52151

[sabernhardt]

I don't think we should simply remove all those width values from list-tables.css, as they can benefit the layout with only the default columns. Of course, it very quickly becomes a problem with additional columns, so something would need to change with the extra columns.

@lospeso, if you would like to edit your temporary fix to eliminate !important, you could use this instead:

.wrap .fixed .column-author, .wrap .fixed .column-format, .wrap .fixed .column-links, .wrap .fixed .column-parent, .wrap .fixed .column-posts, .wrap .fixed .column-categories, .wrap .fixed .column-rel, .wrap .fixed .column-response, .wrap .fixed .column-role, .wrap .fixed .column-tags, .wrap .fixed .column-date {
	width: auto;
}

[mwarbinek]

Replying to sabernhardt:

I don't think we should simply remove all those width values from list-tables.css, as they can benefit the layout with only the default columns. Of course, it very quickly becomes a problem with additional columns, so something would need to change with the extra columns.

@lospeso, if you would like to edit your temporary fix to eliminate !important, you could use this instead:

.wrap .fixed .column-author, .wrap .fixed .column-format, .wrap .fixed .column-links, .wrap .fixed .column-parent, .wrap .fixed .column-posts, .wrap .fixed .column-categories, .wrap .fixed .column-rel, .wrap .fixed .column-response, .wrap .fixed .column-role, .wrap .fixed .column-tags, .wrap .fixed .column-date {
	width: auto;
}

I have the same issue and was searching for a fix and came across this post string.

Thanks for the fix.

[paaljoachim]

Hi

We need a screenshot from what the screen looks like currently and a screenshot for the proposed change to make it easier to give feedback.
Thanks!

[lospeso]

Replying to paaljoachim:

Hi

We need a screenshot from what the screen looks like currently and a screenshot for the proposed change to make it easier to give feedback.
Thanks!

I did.

Look at my initial post (ticket) at the top under the word "Images".
Thanks

[paaljoachim]

The current All posts screen with Yoast SEO plugin activated.

[paaljoachim]

The All posts screen with Yoast SEO plugin activated. - the fix -

[paaljoachim]

Hey @lospeso

I went ahead and added the images directly to the ticket.
Thank you for the fix. It looks a lot better as it more evenly distributes the column widths.

[sabernhardt]

Any fix for this would also relate to #52151, so I'll close the ticket here. Please continue the conversation on that ticket.