Added max-width to DataView columns

[rcrdortiz]

What?

We're adding a max-width to DataView columns to avoid having infinite-length columns.

Why?

The UI for Table DataViews looks broken when a field is really large, the text doesn't get split into multiple lines and we need to scroll to the end to see other columns.

How?

We're adding a max-width to the cells in the DataView's Table Layout.

Testing Instructions

• Start Storybook locally
• Go to: http://localhost:50240/?path=/story/dataviews-dataviews--custom-per-page-sizes
• You should see that the Table Layout is displayed correctly and that the description doesn't span the whole screen

Testing Instructions for Keyboard

Screenshots or screencast

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: rcrdortiz <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jameskoster <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @rcrdortiz! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[youknowriad]

Looks like you committed your personal .idea folder. You might want to consider gitexcluding that in your own global gitignore :)

[youknowriad]

Did you forget adding the fixes (the actual maxWidths...), I don't see it in the diff?

[rcrdortiz]

Did you forget adding the fixes (the actual maxWidths...), I don't see it in the diff?

It got deleted on my second commit, restored the actual fix.

[rcrdortiz]

Looks like you committed your personal .idea folder. You might want to consider gitexcluding that in your own global gitignore :)

Yup, thanks for the tip!

[youknowriad]

Let's add a dataviews CHANGELOG entry about this change. :)

[youknowriad]

If you check the "Templates" DataViews in the site editor, you'll notice the following:

• It has specific styles targeting .page-templates-description to apply something very similar to the generic fix being applied here. (this style should probably be removed)
• If you remove that specific style, the generic fix doesn't work properly all the time (see screenshot). I believe that's because there's not enough fields so the column is large anyway. I wonder if there's a better way to make this fix apply more generically (maybe by targeting the field wrappers rather than "td", at least for the "primary column" maybe if it's not possible for all fields)

What do you think ?

[rcrdortiz]

Here is a video with what the Table Layout looks like with the most recent changes:

latest-table-layout.mp4

[jameskoster]

maybe by targeting the field wrappers rather than "td",

I think this is worth a try. td doesn't respect min-width and max-width very accurately, which seems reasonably important if we want to optimise for legibility (50-75 chars per line including spaces). That's why we ended up with the template description approach.

[rcrdortiz]

I've just pushed some changes that remove the custom class and styles that the Templates DataView had. I still need to figure out what's making the Authors column that wide, but I think it's a step in the right direction. Here is a screenshot of the changes.

[rcrdortiz]

Okay, I've progressed more, but I'm trying to figure out what the best approach is now.

I can keep the nowrap for non-primary column cells. This approach looks best in most cases except when we have cells with really long text; in that case, the length of the cell will be the same as the length of the text. Here are some examples:

nowrap-templates.mp4

nowrap-storybook.mp4

This here is the main issue with not wrapping text:

nowrap-issue.mp4

When we wrap text, large tables become somewhat easier to read, and are better suited (marginally) to the available screen's real estate without requiring scrolling as much, and we avoid having long cells. The problem is that wrapping kicks in soon once we have a few fields. Here are some examples:

wrap-templates.mp4

wrapping-storybook.mp4

I think I'm more inclined towards the nowrap approach, but we wouldn't be solving the main issue. If we have cells with large chunks of text, the table will look just as bad as it does now. I'm not sure if the changes I've made to the primary column are a good enough tradeoff.

What do you all think?