Ensure that antd tables are not too wide

[philippotto]

Can be provoked by zooming in.

[hotzenklotz]

Start Tracing etc is cut off on the right-hand side.

[philippotto]

• add overflow: auto so that the user can at least scroll to the hidden parts
• add word-break: break-word; to ensure that long dataset names break (see Restrict dataset name length in table #4126)

[normanrz]

Would also be great if one could click the name to view the dataset.

[normanrz]

This is not ideal yet. On my monitor, I always have to scroll although there is plenty of empty space.

[hotzenklotz]

Same here. I just briefly looked at the changes. Forcing the table column's to have a minimum width does not seem like a smart workaround. This always forces the table out of my 15" screen even though, the columns could be smaller. (In fact some columns define their width in the react code explicitly, which is overwritten by the CSS)

.large-table table > thead > tr > th:not(.ant-table-expand-icon-th) {
  min-width: 200px;
}

I wonder if removing the min-width is enough to solve this issue, or if it will break overflowing again.

With min-width: (Note the overflow)

Without min-width:

[normanrz]

If you don't set a min-width or width, the table will never overflow the viewport and always squeeze into the existing space. See #4136 (review)

[MichaelBuessemeyer]

(In fact some columns define their width in the react code explicitly, which is overwritten by the CSS)

Completely removing the general min-width and defining it for each column separately sounds good to me.

The current version is not correct as you can see below (This is the explorative annotations table).

@normanrz

If you don't set a min-width or width, the table will never overflow the viewport and always squeeze into the existing space

This is (afaik) correct, but some columns do not need to have a 200px min-width so we have to reduce it for them manually.

[MichaelBuessemeyer]

@philippotto @normanrz Repoening this as the problem still exists for chrome.