No-wrap the date column on post listing screens

[johnbillion]

When viewing a post listing screen in excerpt mode, the Date column can easily become very narrow. When the date text wraps, it looks awful.

Preventing wrapping in this column might be an option. Might also get messed up in some browsers due to the table-layout:fixed on the list table.

[johnbillion]

Screenshot of what I'm talking about

[swissspidy]

Depends on the date format settings. On my de_DE install it doesn't look bad with the date on the first line and time on the second.

With a simple

.column-date {
  white-space: nowrap;
}

the layout is quite broken:

We should consider adding white-space: nowrap for the table headings though.

[McGuive7]

Agreed that the following rule makes additional styling fairly difficult to accomplish in any sort of flexible way:

table.fixed {
  table-layout: fixed;
}

Most columns seem to be set to a hard 10% with the exception of the checkbox column and the excerpt column. My question is: why is this .fixed class in use? It seems like overkill given responsive best practices and prevents natural resizing for the table. Anyone know of other screens/situations in which these hard widths are necessary?

[gaelan]

First post here, looking to start helping with bug fixes.

Simply removing the .fixed class from the table seems to help. The text wraps nicely in Excerpt mode even at very small table widths once that class is removed.

But there's a lot of CSS that depends on that class being in place. If .fixed is removed, the rest of the column widths aren't declared anymore and things like the comment bubble icon get broken. I'd be hesitant to remove that class and just start rewriting all that CSS, especially as a newbie.

Changing the CSS for .fixed tables to table-layout: auto seems to work nicely, but I'm not sure what the impact of the change would be across the rest of the back-end. Can anyone confirm this suggested fix?

[wonderboymusic]

In 34083:

Use table-layout: auto (instead of fixed) on table.fixed to ensure that things like date/time don't horrendously wrap on small screens. Before/After screenshots attached to the ticket.

Props gaelan.
Fixes #32691.

[ocean90]

[34083] will break tables which have long "words" which aren't wrapped, see screencast: ​https://cloudup.com/iGMeRBWfHc8.
The same happens with the ​Syntaxhighlighter plugin.

[wonderboymusic]

In 34709:

Revert [34083], I was willing to try this out for the greater good. The good was not greater. There is too much baggage associated with this specific change as pertains to BC and expected layout.

See #32691.

[wonderboymusic]

In 34710:

List Tables: .column-date needs to become wider at smaller screen sizes, bump it from 10% to 14% at the breakpoint to prevent wrapping.

Fixes #32691.

[gaelan]

Agreed on the fix, had a feeling changing the table layout would cause an issue.