Ensure appropriate width of table columns

CHANGELOG.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 -
 
 ### Changed
+- Each of the  columns of the dataset table and explorative annotations table in the dashboard now have an individual fixed width, so the tables become scrollable on smaller screens. [#4207](https://github.com/scalableminds/webknossos/pull/4207)
 - When uploading a zipped annotation (such as volume / hybrid / collection), the zip name is used for the resulting explorative annotation, rather than the name of the contained NML file. [#4222](https://github.com/scalableminds/webknossos/pull/4222)
 
 ### Fixed

frontend/javascripts/dashboard/advanced_dataset/dataset_table.js

@@ -152,6 +152,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
           title="Name"
           dataIndex="name"
           key="name"
+          width={280}
           sorter={Utils.localeCompareBy(typeHint, dataset => dataset.name)}
           sortOrder={sortedInfo.columnKey === "name" && sortedInfo.order}
           render={(name: string, dataset: APIMaybeUnimportedDataset) => (
@@ -181,7 +182,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
           title="Scale & Extent"
           dataIndex="scale"
           key="scale"
-          width={220}
+          width={280}
           render={(__, dataset: APIMaybeUnimportedDataset) =>
             `${formatScale(dataset.dataSource.scale)}  ${getDatasetExtentAsString(dataset)}`
           }
@@ -229,6 +230,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
         />
         <Column
           title="Data Layers"
+          width={200}
           dataIndex="dataSource.dataLayers"
           render={(__, dataset: APIMaybeUnimportedDataset) =>
             (dataset.dataSource.dataLayers || []).map(layer => (

frontend/javascripts/dashboard/explorative_annotations_view.js

@@ -407,12 +407,14 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
         <Column
           title="ID"
           dataIndex="id"
+          width={100}
           render={(__, tracing: APIAnnotationCompact) => formatHash(tracing.id)}
           sorter={Utils.localeCompareBy(typeHint, annotation => annotation.id)}
           className="monospace-id"
         />
         <Column
           title="Name"
+          width={200}
           dataIndex="name"
           sorter={Utils.localeCompareBy(typeHint, annotation => annotation.name)}
           render={(name: string, tracing: APIAnnotationCompact) =>
@@ -421,6 +423,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
         />
         <Column
           title="Stats"
+          width={100}
           render={(__, annotation: APIAnnotationCompact) =>
             // Flow doesn't recognize that stats must contain the nodeCount if the treeCount is != null
             annotation.stats.treeCount != null &&
@@ -478,10 +481,12 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
         <Column
           title="Modification Date"
           dataIndex="modified"
+          width={150}
           sorter={Utils.compareBy(typeHint, annotation => annotation.modified)}
           render={modified => <FormattedDate timestamp={modified} />}
         />
         <Column
+          width={200}
           title="Actions"
           className="nowrap"
           key="action"

frontend/stylesheets/antd_overwrites.less

@@ -94,8 +94,8 @@
   word-break: break-word;
 }
 
-.large-table table > thead > tr > th:not(.ant-table-expand-icon-th) {
-  min-width: 200px;
+.ant-table-column-title {
+  word-break: normal;
 }
 
 label.ant-checkbox-wrapper {