Make tables horizontally scrollable on overflow and add wordbreak in tables

CHANGELOG.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added the possbility to enforce a certain magnification range for tasks (can be configured in the corresponding task type). [#4101](https://github.com/scalableminds/webknossos/pull/4101)
 - Added the possibility for admins to add experience domains while creating new tasks. [#4119](https://github.com/scalableminds/webknossos/pull/4119)
 - Added a histogram to the dataset settings for each layer. It simplifies adjusting the brightness and contrast of a layer and replaces the brightness and contrast slider. [#4105](https://github.com/scalableminds/webknossos/pull/4105)
+- The dataset table in the dashboard is now horizontally scrollable if the window is not wide enough. Additionally, clicking on the name of a dataset in the table opens of the dataset in view mode. [#4136](https://github.com/scalableminds/webknossos/pull/4136)
 
 ### Changed
 - 

frontend/javascripts/dashboard/advanced_dataset/dataset_table.js

@@ -3,6 +3,7 @@
 import { Table, Icon, Tag } from "antd";
 import * as React from "react";
 import _ from "lodash";
+import { Link } from "react-router-dom";
 import dice from "dice-coefficient";
 
 import type { APITeam, APIMaybeUnimportedDataset } from "admin/api_flow_types";
@@ -154,7 +155,13 @@ class DatasetTable extends React.PureComponent<Props, State> {
           sortOrder={sortedInfo.columnKey === "name" && sortedInfo.order}
           render={(name: string, dataset: APIMaybeUnimportedDataset) => (
             <div>
-              {dataset.name}
+              <Link
+                to={`/datasets/${dataset.owningOrganization}/${dataset.name}/view`}
+                title="View Dataset"
+                style={{ color: "rgba(0, 0, 0, 0.65)" }}
+              >
+                {dataset.name}
+              </Link>
               <br />
               <Tag color={stringToColor(dataset.dataStore.name)}>{dataset.dataStore.name}</Tag>
             </div>

frontend/stylesheets/antd_overwrites.less

@@ -89,6 +89,10 @@
 .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
   padding: 1px 8px;
 }
+.ant-table {
+  overflow: auto;
+  word-break: break-word;
+}
 
 label.ant-checkbox-wrapper {
   line-height: 1.5;