fix verticall scroll

Author: xsalonx

lib/public/components/common/table/table.js

@@ -89,6 +89,9 @@ const parseColumnsConfiguration = (columns, currentProfile) => {
  * specific configuration. If not specified, any visible column will be displayed
  * @property {boolean} horizontalScrollEnabled if true, enable horizontal scroll in case of overflow,
  * fixed layout otherwise
+ * @property {boolean} verticallScrollEnabled if true, enable vertical (table internal) scroll in case of overflow,
+ * whole page vertical scroll otherwise. Note that for this option to working,
+ * all predecesors of the node returned by this function must have display property column-flex and height: 100%
  */
 
 /**
@@ -130,6 +133,7 @@ export const table = (
         profile: currentProfile = profiles.none,
         horizontalScrollEnabled = false,
         freezeFirstColumn = false,
+        verticalScrollEnabled = false,
     } = tableConfiguration || {};
     const { idKey, displayedColumns } = parseColumnsConfiguration(columns, currentProfile);
 
@@ -142,18 +146,26 @@ export const table = (
         Error(`Unhandled type <${typeof data}> of data : ${data ? JSON.stringify(data) : data}`);
     }
 
-    return h(`.fitting-table-wrapper${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-        `table.table.table-hover.shadow-level1.${freezeFirstColumn ? '.freeze-first-column' : ''}`,
-        {
-            style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
-        },
-        [
-            headers(displayedColumns, models),
-            remoteDataTableBody(
-                remoteData,
-                (payload) => rows(payload, idKey, displayedColumns, rowsConfiguration),
-                displayedColumns.length,
-            ),
-        ],
+    const scrollEnabled = horizontalScrollEnabled || verticalScrollEnabled;
+    const wrapperClassesExpression = scrollEnabled ? '.fitting-table-wrapper.scroll-auto' : '';
+
+    const optionalTableClassesExpression = freezeFirstColumn && horizontalScrollEnabled ? '.freeze-first-column' : ''
+
+    const wrappedTableNode = h(wrapperClassesExpression,
+        h(`table.table.table-hover.shadow-level1${optionalTableClassesExpression}`,
+            {
+                style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
+            },
+            [
+                headers(displayedColumns, models),
+                remoteDataTableBody(
+                    remoteData,
+                    (payload) => rows(payload, idKey, displayedColumns, rowsConfiguration),
+                    displayedColumns.length,
+                ),
+            ],
     ));
+    return scrollEnabled && !verticalScrollEnabled
+        ? h('', wrappedTableNode) // Disable y-scroll
+        : wrappedTableNode
 };

lib/public/views/Runs/Overview/RunsWithQcModel.js

@@ -26,6 +26,10 @@ export class RunsWithQcModel extends RunsOverviewModel {
     constructor(model) {
         super(model);
 
-        this.patchDisplayOptions({ horizontalScrollEnabled: true, freezeFirstColumn: true });
+        this.patchDisplayOptions({
+            horizontalScrollEnabled: true,
+            verticalScrollEnabled: true,
+            freezeFirstColumn: true,
+        });
     }
 }