Make tables horizontally scrollable on overflow and add wordbreak in tables

[MichaelBuessemeyer]

This PR adds CSS rule to make tables horizontally scrollable when the screen/container of the table is not wide enough to display the whole table. It also adds the word-break property to the table data to force long words in a table cell to be written in multiple lines.

Additionally, this PR adds the possibility of clicking on the dataset name in the dataset table (dashboard) to open the dataset in view mode.

URL of deployed dev instance (used for testing):

• https://maketablesscrollable.webknossos.xyz

Steps to test:

• Open the dataset table in the dashboard.
• Resize the window to have a small width. The dataset table should now be horizontally scrollable. The scrollbar should be at the bottom of the view. Long dataset names should also be displayed in multiple lines.
• Click on the name of a dataset. It should open up the dataset in view mode.

Issues:

• fixes Ensure that antd tables are not too wide #4106

---

• Updated changelog
• [ ] Updated migration guide if applicable
• [ ] Updated documentation if applicable
• [ ] Adapted wk-connect if datastore API changes
• [ ] Needs datastore update after deployment
• Ready for review

[MichaelBuessemeyer]

@philippotto This PR is also be ready for your review 🙂

[philippotto]

Nice 👍

I think the scrollbar never appears, though. Since the "word wrap" property will always split words further. See here:

Can you add a min-width property to the tables? Maybe a minimum of 800px? In this case, the page should show a horizontal scrollbar (might need some other CSS voodoo for that :)).

[MichaelBuessemeyer]

@philippotto I applied your feedback. As tables are often used in wk, and I did not check whether all tables look fine, with the fix, I only applied it to the dataset table.

If you think there should be a fix like this for all tables please let me know.

P.S.: If the second paragraph does not apply, my PR is ready for your review :)

[philippotto]

@philippotto I applied your feedback. As tables are often used in wk, and I did not check whether all tables look fine, with the fix, I only applied it to the dataset table.

The table itself looks good now, but the horizontal scrollbar is not visible for me :/ Does it appear for you?

[MichaelBuessemeyer]

The table itself looks good now, but the horizontal scrollbar is not visible for me :/ Does it appear for you?

Yes, it works for me. The scrollbar is displayed at the bottom directly above the pagination. It works in firefox and chrome. 🤔

[philippotto]

The table itself looks good now, but the horizontal scrollbar is not visible for me :/ Does it appear for you?

Yes, it works for me. The scrollbar is displayed at the bottom directly above the pagination. It works in firefox and chrome.

Ok, I found the scrollbar :D Ideally, it wouldn't be at the very bottom of the page but at the bottom of the window. But unless you feel like massaging the CSS further, I think it's sufficient for now.

[MichaelBuessemeyer]

Ok, I found the scrollbar :D Ideally, it wouldn't be at the very bottom of the page but at the bottom of the window.

I tried it some time, but could not get it working :/