Post / Page / Plugin Title Columns broken

[pascoedj]

The posts screen in wp-admin is wrapping the post title vertically so that the page becomes unreadable.

WordPress 5.6 running WP-Blossom theme.

screen cap here
​https://1drv.ms/u/s!As8R6Nv2QLWnk9MRrGAJmuNIJ1QDoA?e=dcHWT7
sorry couldn't work out how to upload image ....

[pascoedj]

I should add that if I select Drafts(X) to show just the drafts, it works fine, but when I select All(X) the bug shows again. The post breaking the display is a draft.

[sabernhardt]

@pascoedj Thanks for the report!

The Title column does not have a set width, and I think it needs a min-width. Categories and Tags columns are 15%, Author is 10%, Comments is 5.5em, etc. So having multiple columns added by plugins can make the Title column very narrow.

When looking at Draft posts only, you probably have fewer columns. Until this is fixed, I'd recommend opening Screen Options (at the top) and unchecking any columns you don't need to show.

[mrfoxtalbot]

I have also noticed that this is NOT happening when drafts are listed, but I am not sure why.

As @sabernhardt pointed out, the title column needs a minimum width.

[sabernhardt]

Setting min-width did not work for me with the table-layout: fixed, but there could be a better way.

[sabernhardt]

#53720 was marked as a duplicate.

[costdev]

From what I can see, there are four options:

1. Add a width to the title (such as 15/20%) - This will result in other columns being wrapped.
2. Add overflow: hidden, text-overflow: ellipsis, and width: XXXpx to .fixed .column-title, truncating the title to Visible part of titl..., which will also need a title attribute added to the link so that users can hover over to see the full title.
3. Remove table-layout: fixed from .wp-list-table - This will reduce rendering performance for large tables, in addition to adding a horizontal scrollbar when there are a larger number of columns.
4. Accept that issue is caused by the number of columns and manage the column count using Screen Options.

Short of additional ideas, I would imagine that the availability of Screen Options allows most users to resolve this issue to their satisfaction, and those with specific needs have one of the other options above.

However, if the core aspect of this issue is that title in particular should never be wrapped and this is a case of tidying up, I think the first option above could be a desirable solution.

[mrfoxtalbot]

I would also favor the first option you suggest, @costdev. Titles are probably the most important piece of information and the one that tends to be longer so we should prioritize it.

Also, I wonder why titles do not wrap when drafts are listed and whether we should follow that "glitch" for a possible solution.

[costdev]

Hi @mrfoxtalbot I've tried switching to "Drafts" and adding in some extra columns, but I still get the wrapping issue.

Can you tell me the setup that you have when "All" wraps the title but "Drafts" doesn't?

• WP version
• Active theme
• Active plugins
• The columns you have displaying (in order left-to-right)
• A sample post title that doesn't wrap for you on the "Drafts" page

Thanks!

[sabernhardt]

The (main) difference between Drafts and All is the Comments column.

Setting a 15-20% width on the Title column can help with extra columns, but in a default installation, that can make the checkbox column wider.

#52426 is a very similar ticket, and I probably should have closed that one so the discussion there would be included here. Any change would affect both.

[costdev]

@sabernhardt Between the CSS solution provided in the related ticket, the 15-20% width on the Title column, and the other solutions mentioned in this ticket, which (if any) seems to move us in the best direction in your opinion, including any accessibility concerns you may have?

I can submit a PR with the solution that seems most appropriate right now and we can put it out for further feedback.

[sabernhardt]

If we adjust the column width values, I'm not sure which is the best method. I think a change that helps in one case can be worse than the current layout in another.

Overall, removing the percentage widths from columns (including Date and/or Author, Categories and Tags) might be better than the other options. We may still want to define a width for the Title column in the Extended view:

.fixed.table-view-excerpt .column-title {
    width: 20%;
}

If there is a way to count the shown columns, then keeping the current percentage widths could be better when few columns display.

Truncating the title would be an accessibility/usability concern, but the other suggested solutions are likely no less accessible than a crowded table in the current layout.

[sabernhardt]

#52426 was marked as a duplicate.

[lospeso]

For the sake of reference and confirmation there is an issue how WordPress styles the columns in the Post and Page list.

So, for the benefit of this ticket, I copied the content from my other ticket (52426) and post it here since my ticket was closed and referred to this ticket here.

Below: My Report On Columns Widths Issue / Post-Page List

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 because it is trying to restrict the column widths.

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 CSS "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.

Screenshot 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

Hope this helps.

Thank-you.

PS: a note to the original poster to this ticket "pascoedj"
He mentioned he did not know how to provide a screenshot capture image.

If he happens to read this, you don't have to upload the image to any ticket here.
The simple method is use a free screenshot image upload provided on the Internet.

I use this one: "Lightshot" > URL: ​https://prnt.sc

Upload your screenshot there, then get the URL they give you to view the upload.

It is free.

The screenshots I provided above shows that example.

Lightshot works far better than using your OneDrive access and you don't have to worry about when to end the access link to the image, you can leave it at Lightshot permanently.

[sabbirshouvo]

I know it's an old ticket. But the same issue still exists. In order to easily regenerate the issue, you only need to install the "Ninja Popup" plugin which is a third-party paid plugin. I had a copy of the plugin and tested it with that. Along with Ninja Popup, I've also installed and enabled the Yoast SEO plugin to make sure the issue always happens.

Ninja popup forcefully occupying 20% of the space in the table & the title column doesn't have a width value like other columns, which is the main reason behind this issue.

Now as we identified the issue if we approach a fix using min-width it won't work. Post/Page listing tables are fixed with and min-width max-width doesn't work well with this. It's a CSS issue since CSS 2.1

for this specific scenario, a solution could be applying table-specific CSS to make sure the Title column gets a fixed width. But this will break the auto-expanding of the title column while there is less column.

I'll be adding a patch for table specific CSS for Posts & Pages table.

[sabbirshouvo]

fix for broken title column in posts & pages admin list table

[sabbirshouvo]

Issue test 1

[sabbirshouvo]

Issue test 2

[sabbirshouvo]

Issue test 2

[audrasjb]

As per today's Core bug scrub and last week's CSS scrub, let's move this patch to Future Release as it still needs a design and technical decision.

[sabernhardt]

#60691 was marked as a duplicate.

• REMOVED: fixed value for table-layout
• ADD: min-width to title column

Edit : New Trac ticket: https://core.trac.wordpress.org/ticket/52151

[sylvainnascimento]

Test with issue

[sylvainnascimento]

Test with patch

[ltrihan]

OK, I reproduced the bug on WP 6.6.2 with Polylang install

Tested the fix with PR ​https://github.com/WordPress/wordpress-develop/pull/6226/files
cf.

[sylvainnascimento]

Bug reproduced in reduced window with plugin Polylang setuped with 9 langs and SEO Press

Fixed with PR : ​https://github.com/WordPress/wordpress-develop/pull/6226

[audrasjb]

Hello and thanks for the patch, its update and for testing the patch.

I also tested the patch and it introduces a change on Post screens since it adds an horizontal scrollbar on medium screen sizes when there is a lot of columns.

I'm fine with the current implementation, but perhaps we could only make the table scrollable instead?

[ltrihan]

Indeed, it should be better to have table scrollable horizontally.

However, we would need to wrap the .wp-list-table inside a div like .wp-list-table-wrapper which would be styled with overflow: scroll;

See ​https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table
https://core.trac.wordpress.org/attachment/ticket/52151/wp-list-table-wrapper.png

[davidbaumwald]

With 6.7 RC 1 releasing today this ticket is being moved to 6.8.

If any maintainer or committer feels the remaining work can be competed in time for 6.7 feel free assume ownership and update the milestone accordingly.

[desrosj]

#62383 was marked as a duplicate.

[audrasjb]

As per today's bug scrub: pinging @joedolson for another review on this one

[joedolson]

In order to make an accessible side-scrolling container, we'll need to 1) add tabindex="0" to the wrapper, so that it can accept keyboard focus and be scrolled from the keyboard; 2) add role="region" and aria-label="[context label]", so that when screen reader users reach the table, they are given context about what they've navigated to.

The aria-label can probably use the existing screen reader text placed in the hidden heading above the table, but can't be a substitute for it; they serve different purposes.

It can be helpful for usability to provide a visual cue that the table requires horizontal scrolling; something like ​horizontally scrolling shadows can be helpful.

Overall, the reality of tables is that sometimes scrolling is necessary, and we should adapt for it as best we can. It is pretty crucially important that the title is always readable.

[audrasjb]

Moving to 6.9 early as 6.8 beta 1 is today. We should get this committed before the first beta of the cycle and it's too late now for 6.8.

[sabernhardt]

#64086 was marked as a duplicate.

[praful2111]

Hello Team,

Additionally, the plugin listing table has an issue with the plugin name column. If the plugin name is too long, the table adds a horizontal scroll.

Here is a screenshot of the issue:

To address this, I have figured out the following CSS fix:

.plugins .inactive .plugin-title strong {
    font-weight: 400;
    white-space: break-spaces;
}

This should prevent the horizontal scroll for long plugin names.

[sabernhardt]

6.9 is in beta now, so it is not early anymore.

List tables can squeeze columns into an extremely narrow state when they need more space than the table has available. Plugins that add columns can leave little room for content like post titles, producing tall rows that are difficult to scan.

This adds a scrollable wrapper around the existing table. Above the existing mobile breakpoint, tables switch from fixed to automatic layout, with minimum widths for selected Core columns. When the columns exceed the available space, the wrapper scrolls horizontally. Filters, bulk actions, and pagination stay outside the wrapper.

The table's border moves to the new wrapper, and a fade to white inside it indicates that there is hidden content on the right edge. When scrolling, the fade appears on the left as well, when content is hidden on that edge. These are reversed for RTL content. JavaScript in common.js updates the fades during scrolling, resizing, and when tables are replaced or refreshed in place, like when searching Plugins.

When there is horizontal scrolling, the wrapper enters the Tab order so it can be focused and scrolled with the arrow keys. When a table's content fits in the viewport, the wrapper isn't included in the Tab order.

Screenshots

Narrow columns

With enough columns enabled, titles and headers become difficult to read. The updated table ensures readable column widths and scrolls to reveal the remaining content.

Before	After

Columns that fit without scrolling

With fewer columns visible, the table fits without horizontal scrolling. Automatic layout gives the date column more room, reducing wrapping and row height in this example.

Before	After

Content that prevents wrapping

Preformatted text, text forced onto one line, or a fixed-width widget previously overflowed outside their column, colliding with the content in any that follow. Now, that column expands to contain whatever is in it, and the horizontal scrolling contains it.

Before	After

Testing

The included tests cover initialization, LTR/RTL scrolling, fractional positions and overscroll, resizing, keyboard focus, and cleanup when tables or wrappers are replaced or moved.

To test in the admin:

1. Open Posts with enough visible columns enabled to crowd the table. Size the window larger than the mobile breakpoint, and confirm the columns remain readable as the table begins to scroll.
2. Scroll to both ends and confirm each fade appears only when content is hidden on that side. Repeat in an RTL locale.
3. Tab to an overflowing wrapper and scroll with the arrow keys. Check that a table which fits does not add a Tab stop, and that sorting links retain a complete focus indicator.
4. Resize below the mobile breakpoint and check the existing mobile layout remains unchanged.

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

Use of AI Tools

AI assistance: Yes
Tool(s): Codex (ChatGPT)
Model(s): GPT-6 Astra
Used for: Developing and iterating on the implementation, writing regression checks and documentation, researching browser support, and assisting with code review.

[mattmiklic]

I keep seeing this issue come up, so I opened this PR to try a new approach to solving it. I'd appreciate any thoughts you have! ​https://github.com/WordPress/wordpress-develop/pull/13866

This has kept coming up for me constantly over the years, I've multiple friends and family I've helped with website, they install a single plugin and on their 14 inch laptops, their columns implode. A contextually available scrollbar feels like such a better choice.

I would love if folks could give deep reviews of this one so we can land it. If not in 7.2 then 7.3—it's been an issue for a while and it's worth going straight at it.

[Joen]

Love this. It seems to also relate to this issue in the Gutenberg repo: ​https://github.com/WordPress/gutenberg/issues/84036