From 3ee2c183e03aa90cd90c54ae0d2230f2037f8396 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 16 Jul 2025 19:22:24 +0200
Subject: [PATCH 01/24] a

---
 lib/public/app.css                            | 23 ++++++++++++++++++-
 lib/public/components/common/table/table.js   |  4 ++--
 lib/public/models/OverviewModel.js            |  1 +
 .../RunsPerDataPassOverviewModel.js           |  2 +-
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 939dfb9052..796598a031 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -158,7 +158,7 @@ html, body {
 
 .table-hover tbody tr:hover {
     color: #212529;
-    background-color: rgba(0, 0, 0, 0.075);
+    background-color: rgba(0, 0, 0, 0.275);
 }
 
 th.text-center, td.text-center {
@@ -169,6 +169,27 @@ th.text-center, td.text-center {
     max-height: 3rem;
 }
 
+/* sticky first column when horizontal scrolling */
+.freeze-first-column th:first-child {
+    position: sticky;
+    left: 0;
+    /* background: inherit !important; */
+    background-color: inherit;
+    /* background: var(--color-gray-light); */
+    z-index: 2;
+}
+.freeze-first-column td:first-child {
+    position: sticky;
+    left: 0;
+    background: inherit !important;
+    z-index: 2; 
+}
+
+.freeze-first-column td:first-child {
+    z-index: 1;
+}
+
+
 /* alerts */
 
 .alert {
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 4c9fb0af96..fca01a49ed 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -126,7 +126,7 @@ export const table = (
     }
 
     // Extract the profile of the table
-    const { profile: currentProfile = profiles.none, horizontalScrollEnabled = false } = tableConfiguration || {};
+    const { profile: currentProfile = profiles.none, horizontalScrollEnabled = false, freezeFirstColumn = false } = tableConfiguration || {};
     const { idKey, displayedColumns } = parseColumnsConfiguration(columns, currentProfile);
 
     let remoteData;
@@ -139,7 +139,7 @@ export const table = (
     }
 
     return h(`${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-        'table.table.table-hover.shadow-level1.no-z-index',
+        `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
         {
             style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },
diff --git a/lib/public/models/OverviewModel.js b/lib/public/models/OverviewModel.js
index abe77c8124..68f6250b5d 100644
--- a/lib/public/models/OverviewModel.js
+++ b/lib/public/models/OverviewModel.js
@@ -64,6 +64,7 @@ export class OverviewPageModel extends Observable {
          */
         this._displayOptions = new ObservableData({
             horizontalScrollEnabled: false,
+            freezeFirstColumn: false,
         });
     }
 
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
index 4e2b0c12f8..6f4d4ae011 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
@@ -66,7 +66,7 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
         this._discardAllQcFlagsActionState$ = new ObservableData(RemoteData.notAsked());
         this._discardAllQcFlagsActionState$.bubbleTo(this);
 
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
+        this.patchDisplayOptions({ horizontalScrollEnabled: true, freezeFirstColumn: true });
     }
 
     /**

From a01f51bf6af496d7790d17acf48420762aa416de Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Thu, 17 Jul 2025 11:20:36 +0200
Subject: [PATCH 02/24] add CSS

---
 lib/public/app.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 796598a031..3956d04663 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -158,7 +158,8 @@ html, body {
 
 .table-hover tbody tr:hover {
     color: #212529;
-    background-color: rgba(0, 0, 0, 0.275);
+    --hover-background: rgb(185, 185, 185);
+    background-color: var(--hover-background);
 }
 
 th.text-center, td.text-center {
@@ -169,26 +170,43 @@ th.text-center, td.text-center {
     max-height: 3rem;
 }
 
+
 /* sticky first column when horizontal scrolling */
 .freeze-first-column th:first-child {
+    background: var(--color-gray-light); 
     position: sticky;
     left: 0;
-    /* background: inherit !important; */
-    background-color: inherit;
-    /* background: var(--color-gray-light); */
     z-index: 2;
 }
+
 .freeze-first-column td:first-child {
+    background: inherit;
     position: sticky;
     left: 0;
-    background: inherit !important;
     z-index: 2; 
 }
 
-.freeze-first-column td:first-child {
-    z-index: 1;
+.freeze-first-column td:first-child::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-gray-light);
 }
 
+.freeze-first-column th:first-child::after  {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-gray);
+}
+
+
 
 /* alerts */
 

From 81f8fba6b3c5f358b598e532e1aa3871f44bdbc5 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Thu, 17 Jul 2025 11:20:48 +0200
Subject: [PATCH 03/24] abstraction

---
 .../FixedPdpBeamTypeRunsOverviewModel.js      |  4 +--
 .../views/Runs/Overview/RunsWithQcModel.js    | 31 +++++++++++++++++++
 .../RunsPerDataPassOverviewModel.js           |  2 --
 .../RunsPerLhcPeriodOverviewModel.js          |  6 ++--
 .../RunsPerSimulationPassOverviewModel.js     |  6 ++--
 5 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 lib/public/views/Runs/Overview/RunsWithQcModel.js

diff --git a/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js b/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js
index fa20c839de..5fe3215406 100644
--- a/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js
+++ b/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js
@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { RunsOverviewModel } from './RunsOverviewModel.js';
+import { RunsWithQcModel } from './RunsWithQcModel.js';
 
 /**
  * FixedPdpBeamTypeRunsOverviewModel
@@ -19,7 +19,7 @@ import { RunsOverviewModel } from './RunsOverviewModel.js';
  * Runs overview model which stores information about pdp_beam_type,
  * which is supposed to be the same for all runs stored in this model
  */
-export class FixedPdpBeamTypeRunsOverviewModel extends RunsOverviewModel {
+export class FixedPdpBeamTypeRunsOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      * @param {Model} model global model
diff --git a/lib/public/views/Runs/Overview/RunsWithQcModel.js b/lib/public/views/Runs/Overview/RunsWithQcModel.js
new file mode 100644
index 0000000000..08219bdd93
--- /dev/null
+++ b/lib/public/views/Runs/Overview/RunsWithQcModel.js
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { RunsOverviewModel } from './RunsOverviewModel.js';
+
+/**
+ * RunsWithQcModel
+ *
+ * Runs overview model which stores common information for all RCT runs overviews pages
+ */
+export class RunsWithQcModel extends RunsOverviewModel {
+    /**
+     * Constructor
+     * @param {Model} model global model
+     */
+    constructor(model) {
+        super(model);
+
+        this.patchDisplayOptions({ horizontalScrollEnabled: true, freezeFirstColumn: true });
+    }
+}
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
index 6f4d4ae011..7d4cbfdbee 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js
@@ -65,8 +65,6 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo
 
         this._discardAllQcFlagsActionState$ = new ObservableData(RemoteData.notAsked());
         this._discardAllQcFlagsActionState$.bubbleTo(this);
-
-        this.patchDisplayOptions({ horizontalScrollEnabled: true, freezeFirstColumn: true });
     }
 
     /**
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
index 25607f2318..898fd3f97c 100644
--- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
+++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js
@@ -13,7 +13,7 @@
 import { buildUrl, RemoteData } from '/js/src/index.js';
 import { TabbedPanelModel } from '../../../components/TabbedPanel/TabbedPanelModel.js';
 import { detectorsProvider } from '../../../services/detectors/detectorsProvider.js';
-import { RunsOverviewModel } from '../Overview/RunsOverviewModel.js';
+import { RunsWithQcModel } from '../Overview/RunsWithQcModel.js';
 import { jsonFetch } from '../../../utilities/fetch/jsonFetch.js';
 
 export const RUNS_PER_LHC_PERIOD_PANELS_KEYS = {
@@ -24,7 +24,7 @@ export const RUNS_PER_LHC_PERIOD_PANELS_KEYS = {
 /**
  * Runs Per LHC Period overview model
  */
-export class RunsPerLhcPeriodOverviewModel extends RunsOverviewModel {
+export class RunsPerLhcPeriodOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      *
@@ -35,8 +35,6 @@ export class RunsPerLhcPeriodOverviewModel extends RunsOverviewModel {
         this._detectors$ = detectorsProvider.physical$;
         this._detectors$.bubbleTo(this);
 
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
-
         this._tabbedPanelModel = new RunsPerLhcPeriodTabbedPanelModel();
         this._tabbedPanelModel.bubbleTo(this);
     }
diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
index 0e1c468114..38ab7edad1 100644
--- a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
+++ b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js
@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 import { buildUrl, RemoteData } from '/js/src/index.js';
-import { RunsOverviewModel } from '../Overview/RunsOverviewModel.js';
+import { RunsWithQcModel } from '../Overview/RunsWithQcModel.js';
 import { ObservableData } from '../../../utilities/ObservableData.js';
 import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
 import { detectorsProvider } from '../../../services/detectors/detectorsProvider.js';
@@ -20,7 +20,7 @@ import { RunDetectorsSelectionModel } from '../RunDetectorsSelectionModel.js';
 /**
  * Runs Per Simulation Pass overview model
  */
-export class RunsPerSimulationPassOverviewModel extends RunsOverviewModel {
+export class RunsPerSimulationPassOverviewModel extends RunsWithQcModel {
     /**
      * Constructor
      * @param {Model} model global model
@@ -36,8 +36,6 @@ export class RunsPerSimulationPassOverviewModel extends RunsOverviewModel {
 
         this._runDetectorsSelectionModel = new RunDetectorsSelectionModel();
         this._runDetectorsSelectionModel.bubbleTo(this);
-
-        this.patchDisplayOptions({ horizontalScrollEnabled: true });
     }
 
     /**

From c89f61a35bda99fcab65538290e65ca6dde96021 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Thu, 17 Jul 2025 16:38:41 +0200
Subject: [PATCH 04/24] tmp tmp tmp

---
 lib/public/app.css                            | 18 ++++++++++++++++++
 lib/public/components/NavBar/index.js         |  2 +-
 lib/public/components/common/table/headers.js |  2 +-
 lib/public/components/common/table/table.js   |  4 ++--
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 3956d04663..8bd9e814d2 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -207,6 +207,24 @@ th.text-center, td.text-center {
 }
 
 
+/* Sticky table headers */
+.sticky-header thead tr {
+    position: sticky;
+    top: 0;
+    background-color: var(--color-white);
+    z-index: 3;
+}
+
+.table-max-height {
+    max-height: 90vh;
+}
+
+.sticky-top {
+    position: sticky;
+    z-index: 3;
+    top: 0;
+}
+
 
 /* alerts */
 
diff --git a/lib/public/components/NavBar/index.js b/lib/public/components/NavBar/index.js
index 09645227a0..7bb9529175 100644
--- a/lib/public/components/NavBar/index.js
+++ b/lib/public/components/NavBar/index.js
@@ -121,7 +121,7 @@ function navBar(model) {
     const pageMenuLink = (content, page) => basePageMenuLink(content, page, () => model.clearDropdownMenu(), currentPage === page);
     const absoluteMenuLink = (content, page) => baseAbsoluteMenuLink(content, page, () => model.clearDropdownMenu());
 
-    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
+    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light.sticky-top', [
         h('.f4.gray-darker#navbar-title', 'Bookkeeping'),
         h('.btn-group', [
             ...configurationService.configuration$.getCurrent().match({
diff --git a/lib/public/components/common/table/headers.js b/lib/public/components/common/table/headers.js
index 1bb1454f3b..f502b2cb19 100644
--- a/lib/public/components/common/table/headers.js
+++ b/lib/public/components/common/table/headers.js
@@ -32,7 +32,7 @@ export const headers = (columns, models) => {
     const isInlineFilter = columns.some(({ inlineFilter }) => inlineFilter);
     const { sort: sortModel = null, filter: filterModel = null } = models || {};
 
-    return h('thead', h(`tr${isInlineFilter ? '.va-top' : ''}`, columns.map((column) => {
+    return h('thead.sticky-top', h(`tr${isInlineFilter ? '.va-top' : ''}`, columns.map((column) => {
         const { size, name, sortable, key, inlineFilter, information } = column;
         const classes = [size || null, column.classes || null];
 
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index fca01a49ed..1cb76e1982 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -138,8 +138,8 @@ export const table = (
         Error(`Unhandled type <${typeof data}> of data : ${data ? JSON.stringify(data) : data}`);
     }
 
-    return h(`${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-        `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
+    return h(`${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}.table-max-height`, h(
+        `table.table.table-hover.shadow-level1.no-z-index.sticky-top${freezeFirstColumn ? '.freeze-first-column' : ''}`,
         {
             style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },

From 0575d9960faf9339124a60ce668ab63a18f3a23a Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Fri, 18 Jul 2025 17:03:49 +0200
Subject: [PATCH 05/24] WIP step 1

---
 lib/public/app.css                            | 20 ++++++++++-----
 lib/public/components/NavBar/index.js         |  2 +-
 lib/public/components/common/table/headers.js |  2 +-
 lib/public/components/common/table/table.js   | 10 +++++---
 lib/public/view.js                            | 25 ++++++++++++++++++-
 .../RunsPerDataPassOverviewPage.js            |  3 ++-
 6 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index eebcc2e0e2..7b20f0072b 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -208,22 +208,30 @@ th.text-center, td.text-center {
 
 
 /* Sticky table headers */
-.sticky-header thead tr {
+/* .sticky-header thead tr {
     position: sticky;
     top: 0;
     background-color: var(--color-white);
     z-index: 3;
-}
+} */
 
-.table-max-height {
-    max-height: 90vh;
+.fitting-table-wrapper {
+    flex: 1 1 auto;      /* wypełnia całą pozostałą wysokość */
+    overflow-y: auto;    /* pionowy scroll wewnątrz kontenera */
+    background-color: red;
 }
 
-.sticky-top {
+/* .fitting-table thead tr {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+} */
+
+/* .sticky-top {
     position: sticky;
     z-index: 3;
     top: 0;
-}
+} */
 
 
 /* alerts */
diff --git a/lib/public/components/NavBar/index.js b/lib/public/components/NavBar/index.js
index 7bb9529175..09645227a0 100644
--- a/lib/public/components/NavBar/index.js
+++ b/lib/public/components/NavBar/index.js
@@ -121,7 +121,7 @@ function navBar(model) {
     const pageMenuLink = (content, page) => basePageMenuLink(content, page, () => model.clearDropdownMenu(), currentPage === page);
     const absoluteMenuLink = (content, page) => baseAbsoluteMenuLink(content, page, () => model.clearDropdownMenu());
 
-    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light.sticky-top', [
+    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
         h('.f4.gray-darker#navbar-title', 'Bookkeeping'),
         h('.btn-group', [
             ...configurationService.configuration$.getCurrent().match({
diff --git a/lib/public/components/common/table/headers.js b/lib/public/components/common/table/headers.js
index f502b2cb19..1bb1454f3b 100644
--- a/lib/public/components/common/table/headers.js
+++ b/lib/public/components/common/table/headers.js
@@ -32,7 +32,7 @@ export const headers = (columns, models) => {
     const isInlineFilter = columns.some(({ inlineFilter }) => inlineFilter);
     const { sort: sortModel = null, filter: filterModel = null } = models || {};
 
-    return h('thead.sticky-top', h(`tr${isInlineFilter ? '.va-top' : ''}`, columns.map((column) => {
+    return h('thead', h(`tr${isInlineFilter ? '.va-top' : ''}`, columns.map((column) => {
         const { size, name, sortable, key, inlineFilter, information } = column;
         const classes = [size || null, column.classes || null];
 
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index a80a30a209..9dda892258 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -138,10 +138,14 @@ export const table = (
         Error(`Unhandled type <${typeof data}> of data : ${data ? JSON.stringify(data) : data}`);
     }
 
-    return h(`.table-max-height${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-        `table.sticky-top.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
+
+
+    // return h(`.fitting-table${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
+    return h(`.fitting-table.scroll-y`, h(
+        // `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
+        `table.table.table-hover.shadow-level1.scroll-y`,
         {
-            style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
+            // style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },
         [
             headers(displayedColumns, models),
diff --git a/lib/public/view.js b/lib/public/view.js
index e82b80ab3a..5a5a388634 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -119,11 +119,34 @@ export default (model) => {
         error: ErrorPage,
     };
 
+        const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
+    const raw = `
+        <div class="fitting-table-wrapper">
+            <table>
+            <thead>
+                <tr>
+                <th>#</th>
+                <th>Nazwa</th>
+                <th>Kategoria</th>
+                <th>Data</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${row.repeat(30)}
+            </tbody>
+            </table>
+        </div>
+
+    `;
+
+    // return m.trust(raw)
+
     return [
         h('.flex-column.absolute-fill', [
             modalContainer(model.modalModel),
             NavBar(model),
-            content(model, pages),
+            // content(model, pages),
+            m.trust(raw)
         ]),
     ];
 };
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index e4d64214cb..ba856cdc6f 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -40,7 +40,8 @@ import { numericalComparisonFilter } from '../../../components/Filters/common/fi
 import { iconCaretBottom } from '/js/src/icons.js';
 import { BkpRoles } from '../../../domain/enums/BkpRoles.js';
 
-const TABLEROW_HEIGHT = 59;
+// const TABLEROW_HEIGHT = 59;
+const TABLEROW_HEIGHT = 19;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
 const PAGE_USED_HEIGHT = 215;
 

From d61e05fae83adf055fb7f5db271cf9805bbbccf8 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Fri, 18 Jul 2025 17:18:55 +0200
Subject: [PATCH 06/24] a

---
 lib/public/view.js                            |  6 ++---
 .../RunsPerDataPassOverviewPage.js            | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/lib/public/view.js b/lib/public/view.js
index 5a5a388634..f9dd1ab694 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -119,7 +119,7 @@ export default (model) => {
         error: ErrorPage,
     };
 
-        const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
+    const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
     const raw = `
         <div class="fitting-table-wrapper">
             <table>
@@ -145,8 +145,8 @@ export default (model) => {
         h('.flex-column.absolute-fill', [
             modalContainer(model.modalModel),
             NavBar(model),
-            // content(model, pages),
-            m.trust(raw)
+            content(model, pages),
+            // m.trust(raw)
         ]),
     ];
 };
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index ba856cdc6f..493bd817d5 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -131,6 +131,28 @@ export const RunsPerDataPassOverviewPage = ({
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Physics Runs');
     const runDetectorsSelectionIsEmpty = perDataPassOverviewModel.runDetectorsSelectionModel.selectedQueryString.length === 0;
 
+     const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
+    const raw = `
+        <div class="fitting-table-wrapper">
+            <table>
+            <thead>
+                <tr>
+                <th>#</th>
+                <th>Nazwa</th>
+                <th>Kategoria</th>
+                <th>Data</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${row.repeat(30)}
+            </tbody>
+            </table>
+        </div>
+
+    `;
+
+    return m.trust(raw)
+
     return h(
         '',
         { onremove: () => perDataPassOverviewModel.reset(false) },

From 4f93746e9132c83e1e4703886add63726f5730e0 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 16:38:37 +0200
Subject: [PATCH 07/24] works

---
 lib/public/app.css                            | 21 ++++++++++-----
 lib/public/components/NavBar/index.js         |  2 +-
 lib/public/components/common/table/table.js   | 16 ++++++-----
 lib/public/view.js                            | 27 ++-----------------
 .../RunsPerDataPassOverviewPage.js            |  6 ++---
 5 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 7b20f0072b..0c446b2343 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -176,7 +176,7 @@ th.text-center, td.text-center {
     background: var(--color-gray-light); 
     position: sticky;
     left: 0;
-    z-index: 2;
+    z-index: 3;
 }
 
 .freeze-first-column td:first-child {
@@ -221,17 +221,24 @@ th.text-center, td.text-center {
     background-color: red;
 }
 
-/* .fitting-table thead tr {
+.fitting-table-wrapper thead th {
     position: sticky;
     top: 0;
-    z-index: 2;
-} */
+    z-index: 3;
+    background-color: blue;
+}
 
-/* .sticky-top {
+.sticky-nav-bar {
     position: sticky;
-    z-index: 3;
+    z-index: 4;
     top: 0;
-} */
+}
+
+.mid-flex-column {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
 
 
 /* alerts */
diff --git a/lib/public/components/NavBar/index.js b/lib/public/components/NavBar/index.js
index 09645227a0..2b2492cd13 100644
--- a/lib/public/components/NavBar/index.js
+++ b/lib/public/components/NavBar/index.js
@@ -121,7 +121,7 @@ function navBar(model) {
     const pageMenuLink = (content, page) => basePageMenuLink(content, page, () => model.clearDropdownMenu(), currentPage === page);
     const absoluteMenuLink = (content, page) => baseAbsoluteMenuLink(content, page, () => model.clearDropdownMenu());
 
-    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
+    return h('.flex-row.sticky-nav-bar.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
         h('.f4.gray-darker#navbar-title', 'Bookkeeping'),
         h('.btn-group', [
             ...configurationService.configuration$.getCurrent().match({
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 9dda892258..4481e4483e 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -126,7 +126,11 @@ export const table = (
     }
 
     // Extract the profile of the table
-    const { profile: currentProfile = profiles.none, horizontalScrollEnabled = false, freezeFirstColumn = false } = tableConfiguration || {};
+    const {
+        profile: currentProfile = profiles.none,
+        horizontalScrollEnabled = false,
+        freezeFirstColumn = false,
+    } = tableConfiguration || {};
     const { idKey, displayedColumns } = parseColumnsConfiguration(columns, currentProfile);
 
     let remoteData;
@@ -140,12 +144,12 @@ export const table = (
 
 
 
-    // return h(`.fitting-table${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-    return h(`.fitting-table.scroll-y`, h(
-        // `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
-        `table.table.table-hover.shadow-level1.scroll-y`,
+    return h(`.fitting-table-wrapper${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
+    // return h(`.fitting-table.scroll-y`, h(
+        `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
+        // `table.table.table-hover.shadow-level1.scroll-y`,
         {
-            // style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
+            style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },
         [
             headers(displayedColumns, models),
diff --git a/lib/public/view.js b/lib/public/view.js
index f9dd1ab694..6589d11863 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -119,34 +119,11 @@ export default (model) => {
         error: ErrorPage,
     };
 
-    const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
-    const raw = `
-        <div class="fitting-table-wrapper">
-            <table>
-            <thead>
-                <tr>
-                <th>#</th>
-                <th>Nazwa</th>
-                <th>Kategoria</th>
-                <th>Data</th>
-                </tr>
-            </thead>
-            <tbody>
-                ${row.repeat(30)}
-            </tbody>
-            </table>
-        </div>
-
-    `;
-
-    // return m.trust(raw)
-
     return [
-        h('.flex-column.absolute-fill', [
+        h('.mid-flex-column.absolute-fill', [
             modalContainer(model.modalModel),
             NavBar(model),
             content(model, pages),
-            // m.trust(raw)
         ]),
     ];
 };
@@ -160,7 +137,7 @@ export default (model) => {
 const content = (model, pages) => h(
     '#global-container',
     h(
-        '.flex-column',
+        '.mid-flex-column',
         {
             key: model.router.params.page,
             style: 'min-height: 100%',
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index 493bd817d5..dedecaf1dd 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -151,10 +151,10 @@ export const RunsPerDataPassOverviewPage = ({
 
     `;
 
-    return m.trust(raw)
+    // return m.trust(raw)
 
     return h(
-        '',
+        '.mid-flex-column',
         { onremove: () => perDataPassOverviewModel.reset(false) },
         mergeRemoteData([remoteDataPass, remoteRuns, remoteDetectors, remoteQcSummary, remoteGaqSummary]).match({
             NotAsked: () => null,
@@ -324,7 +324,7 @@ export const RunsPerDataPassOverviewPage = ({
                         Failure: (errors) => errorAlert(errors),
                         Other: () => null,
                     }),
-                    h('.flex-column.w-100', [
+                    h('.mid-flex-column.w-100', [
                         table(
                             runs,
                             activeColumns,

From 09afac394d8ef9e38dfcaa458955c6f4f01c42d7 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 18:09:14 +0200
Subject: [PATCH 08/24] works

---
 lib/public/app.css                            | 25 ++++---------------
 lib/public/components/NavBar/index.js         |  2 +-
 lib/public/components/common/table/table.js   |  2 +-
 lib/public/view.js                            |  4 +--
 .../RunsPerDataPassOverviewPage.js            |  8 +++---
 5 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 0c446b2343..2342d5cc2a 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -207,34 +207,19 @@ th.text-center, td.text-center {
 }
 
 
-/* Sticky table headers */
-/* .sticky-header thead tr {
-    position: sticky;
-    top: 0;
-    background-color: var(--color-white);
-    z-index: 3;
-} */
-
 .fitting-table-wrapper {
-    flex: 1 1 auto;      /* wypełnia całą pozostałą wysokość */
-    overflow-y: auto;    /* pionowy scroll wewnątrz kontenera */
-    background-color: red;
+    flex: 1 1 auto;
+    overflow-y: auto;
+    height: 100%;
 }
 
-.fitting-table-wrapper thead th {
+.fitting-table-wrapper thead {
     position: sticky;
     top: 0;
     z-index: 3;
-    background-color: blue;
-}
-
-.sticky-nav-bar {
-    position: sticky;
-    z-index: 4;
-    top: 0;
 }
 
-.mid-flex-column {
+.intermediate-flex-column {
     display: flex;
     flex-direction: column;
     height: 100%;
diff --git a/lib/public/components/NavBar/index.js b/lib/public/components/NavBar/index.js
index 2b2492cd13..09645227a0 100644
--- a/lib/public/components/NavBar/index.js
+++ b/lib/public/components/NavBar/index.js
@@ -121,7 +121,7 @@ function navBar(model) {
     const pageMenuLink = (content, page) => basePageMenuLink(content, page, () => model.clearDropdownMenu(), currentPage === page);
     const absoluteMenuLink = (content, page) => baseAbsoluteMenuLink(content, page, () => model.clearDropdownMenu());
 
-    return h('.flex-row.sticky-nav-bar.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
+    return h('.flex-row.justify-between.items-center.p2.shadow-level2.level2.bg-gray-light', [
         h('.f4.gray-darker#navbar-title', 'Bookkeeping'),
         h('.btn-group', [
             ...configurationService.configuration$.getCurrent().match({
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 4481e4483e..93906c14f8 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -146,7 +146,7 @@ export const table = (
 
     return h(`.fitting-table-wrapper${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
     // return h(`.fitting-table.scroll-y`, h(
-        `table.table.table-hover.shadow-level1.no-z-index${freezeFirstColumn ? '.freeze-first-column' : ''}`,
+        `table.table.table-hover.shadow-level1.${freezeFirstColumn ? '.freeze-first-column' : ''}`,
         // `table.table.table-hover.shadow-level1.scroll-y`,
         {
             style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
diff --git a/lib/public/view.js b/lib/public/view.js
index 6589d11863..c2d4dfa82e 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -120,7 +120,7 @@ export default (model) => {
     };
 
     return [
-        h('.mid-flex-column.absolute-fill', [
+        h('.intermediate-flex-column.absolute-fill', [
             modalContainer(model.modalModel),
             NavBar(model),
             content(model, pages),
@@ -137,7 +137,7 @@ export default (model) => {
 const content = (model, pages) => h(
     '#global-container',
     h(
-        '.mid-flex-column',
+        '.intermediate-flex-column',
         {
             key: model.router.params.page,
             style: 'min-height: 100%',
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index dedecaf1dd..d88202d334 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -154,7 +154,7 @@ export const RunsPerDataPassOverviewPage = ({
     // return m.trust(raw)
 
     return h(
-        '.mid-flex-column',
+        '.intermediate-flex-column',
         { onremove: () => perDataPassOverviewModel.reset(false) },
         mergeRemoteData([remoteDataPass, remoteRuns, remoteDetectors, remoteQcSummary, remoteGaqSummary]).match({
             NotAsked: () => null,
@@ -324,7 +324,7 @@ export const RunsPerDataPassOverviewPage = ({
                         Failure: (errors) => errorAlert(errors),
                         Other: () => null,
                     }),
-                    h('.mid-flex-column.w-100', [
+                    // h('.intermediate-flex-column.w-100', [
                         table(
                             runs,
                             activeColumns,
@@ -335,8 +335,8 @@ export const RunsPerDataPassOverviewPage = ({
                             },
                             { sort: sortModel },
                         ),
-                        paginationComponent(perDataPassOverviewModel.pagination),
-                    ]),
+                    // ]),
+                    paginationComponent(perDataPassOverviewModel.pagination),
                 ];
             },
             Loading: () => spinner(),

From ea0d46d3193b7f3d39eb20701459423ae274c18a Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 18:11:39 +0200
Subject: [PATCH 09/24] cleanup

---
 lib/public/components/common/table/table.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 93906c14f8..e8d3012e67 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -145,9 +145,7 @@ export const table = (
 
 
     return h(`.fitting-table-wrapper${horizontalScrollEnabled ? '.scroll-auto.shadow-level1' : ''}`, h(
-    // return h(`.fitting-table.scroll-y`, h(
         `table.table.table-hover.shadow-level1.${freezeFirstColumn ? '.freeze-first-column' : ''}`,
-        // `table.table.table-hover.shadow-level1.scroll-y`,
         {
             style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
         },

From d8d8ffa191e1058d20189fe42e357c29c53e4a95 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 18:12:33 +0200
Subject: [PATCH 10/24] cleanup

---
 .../RunsPerDataPassOverviewPage.js            | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index d88202d334..7233bfddea 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -131,28 +131,6 @@ export const RunsPerDataPassOverviewPage = ({
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Physics Runs');
     const runDetectorsSelectionIsEmpty = perDataPassOverviewModel.runDetectorsSelectionModel.selectedQueryString.length === 0;
 
-     const row = '<tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>'
-    const raw = `
-        <div class="fitting-table-wrapper">
-            <table>
-            <thead>
-                <tr>
-                <th>#</th>
-                <th>Nazwa</th>
-                <th>Kategoria</th>
-                <th>Data</th>
-                </tr>
-            </thead>
-            <tbody>
-                ${row.repeat(30)}
-            </tbody>
-            </table>
-        </div>
-
-    `;
-
-    // return m.trust(raw)
-
     return h(
         '.intermediate-flex-column',
         { onremove: () => perDataPassOverviewModel.reset(false) },

From 26fdec9a812544f7a221e49a184a06da81bd0e99 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 18:13:43 +0200
Subject: [PATCH 11/24] cleanup

---
 .../RunsPerDataPassOverviewPage.js            | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index 7233bfddea..7a3bbcec4d 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -40,8 +40,7 @@ import { numericalComparisonFilter } from '../../../components/Filters/common/fi
 import { iconCaretBottom } from '/js/src/icons.js';
 import { BkpRoles } from '../../../domain/enums/BkpRoles.js';
 
-// const TABLEROW_HEIGHT = 59;
-const TABLEROW_HEIGHT = 19;
+const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
 const PAGE_USED_HEIGHT = 215;
 
@@ -92,7 +91,6 @@ const skimmableControl = (dataPass, onclick, requestResult) => {
             NotAsked: () => h('button.btn.primary', { onclick }, buttonContent),
         });
     }
-    return;
 };
 
 /**
@@ -302,18 +300,16 @@ export const RunsPerDataPassOverviewPage = ({
                         Failure: (errors) => errorAlert(errors),
                         Other: () => null,
                     }),
-                    // h('.intermediate-flex-column.w-100', [
-                        table(
-                            runs,
-                            activeColumns,
-                            { classes: getRowClasses },
-                            {
-                                profile: 'runsPerDataPass',
-                                ...displayOptions,
-                            },
-                            { sort: sortModel },
-                        ),
-                    // ]),
+                    table(
+                        runs,
+                        activeColumns,
+                        { classes: getRowClasses },
+                        {
+                            profile: 'runsPerDataPass',
+                            ...displayOptions,  
+                        },
+                        { sort: sortModel },
+                    ),
                     paginationComponent(perDataPassOverviewModel.pagination),
                 ];
             },

From 44236ded4ac5bb6b0a73eda5e02f8e627d7ccfbc Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Mon, 21 Jul 2025 18:14:15 +0200
Subject: [PATCH 12/24] cleanup

---
 lib/public/components/common/table/table.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index e8d3012e67..3dabcaf050 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -142,8 +142,6 @@ 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' : ''}`,
         {

From 852c5f012280df715938cd60f81ee7730d993b60 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Tue, 22 Jul 2025 16:23:09 +0200
Subject: [PATCH 13/24] fix verticall scroll

---
 lib/public/components/common/table/table.js   | 38 ++++++++++++-------
 .../views/Runs/Overview/RunsWithQcModel.js    |  6 ++-
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 3dabcaf050..0ef98f85fc 100644
--- a/lib/public/components/common/table/table.js
+++ b/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
 };
diff --git a/lib/public/views/Runs/Overview/RunsWithQcModel.js b/lib/public/views/Runs/Overview/RunsWithQcModel.js
index 08219bdd93..4dff88c1f1 100644
--- a/lib/public/views/Runs/Overview/RunsWithQcModel.js
+++ b/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,
+        });
     }
 }

From a7b7ea4088e8126083feb4a2b7f8e6baf0b8c55e Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Tue, 22 Jul 2025 16:35:30 +0200
Subject: [PATCH 14/24] fix per simulation pass

---
 .../RunsPerSimulationPassOverviewPage.js      | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
index fd2780cab1..75f6a88736 100644
--- a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
+++ b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
@@ -68,7 +68,7 @@ export const RunsPerSimulationPassOverviewPage = ({
 
     const commonTitle = h('h2', 'Runs per MC');
 
-    return h('', mergeRemoteData([remoteSimulationPass, remoteRuns, remoteDetectors, remoteQcSummary]).match({
+    return h('.intermediate-flex-column', mergeRemoteData([remoteSimulationPass, remoteRuns, remoteDetectors, remoteQcSummary]).match({
         NotAsked: () => null,
         Failure: (errors) => errorAlert(errors),
         Success: ([simulationPass, runs, detectors, qcSummary]) => {
@@ -111,19 +111,17 @@ export const RunsPerSimulationPassOverviewPage = ({
                         },
                     ),
                 ]),
-                h('.flex-column.w-100', [
-                    table(
-                        runs,
-                        activeColumns,
-                        { classes: getRowClasses },
-                        {
-                            profile: 'runsPerSimulationPass',
-                            ...displayOptions,
-                        },
-                        { sort: sortModel },
-                    ),
-                    paginationComponent(perSimulationPassOverviewModel.pagination),
-                ]),
+                table(
+                    runs,
+                    activeColumns,
+                    { classes: getRowClasses },
+                    {
+                        profile: 'runsPerSimulationPass',
+                        ...displayOptions,
+                    },
+                    { sort: sortModel },
+                ),
+                paginationComponent(perSimulationPassOverviewModel.pagination),
             ];
         },
         Loading: () => spinner(),

From 50addd6430be8bb0c2027ad79072d9b10ad0518a Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Tue, 22 Jul 2025 16:57:25 +0200
Subject: [PATCH 15/24] fix pe rLHC periods

---
 .../TabbedPanel/tabbedPanelComponent.js           |  1 -
 .../RunPerPeriod/RunsPerLhcPeriodOverviewPage.js  | 15 ++++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/public/components/TabbedPanel/tabbedPanelComponent.js b/lib/public/components/TabbedPanel/tabbedPanelComponent.js
index acb740b2d4..bcf78a6144 100644
--- a/lib/public/components/TabbedPanel/tabbedPanelComponent.js
+++ b/lib/public/components/TabbedPanel/tabbedPanelComponent.js
@@ -14,7 +14,6 @@ import { tabLink } from '../common/navigation/tabLink.js';
  */
 export const tabbedPanelComponent = (tabbedPanelModel, panelsTitles, panelsBodies, configuration) => {
     const { panelClass = 'p2' } = configuration || {};
-
     return [
         h(
             'ul.nav.nav-tabs',
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
index a0cd4a9ff5..cecb81e689 100644
--- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
+++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
@@ -82,7 +82,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
      * @param {object} detectorsActiveColumns active columns
      * @return {Component} table with pagination
      */
-    const getTableWithGivenDetectorsColumns = (detectorsActiveColumns) => h('.flex-column.w-100', [
+    const getTableWithGivenDetectorsColumns = (detectorsActiveColumns) =>
         table(
 
             /*
@@ -100,16 +100,14 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
                 ...displayOptions,
             },
             { sort: sortModel },
-        ),
-        paginationComponent(perLhcPeriodOverviewModel.pagination),
-    ]);
+        );
 
-    return h('', [
+    return h('.intermediate-flex-column', [
         h('.flex-row.justify-between.g2', [
             h('h2', `Good, physics runs of ${lhcPeriodName}`),
             exportRunsTriggerAndModal(perLhcPeriodOverviewModel, modalModel),
         ]),
-        tabbedPanelComponent(
+        ...tabbedPanelComponent(
             tabbedPanelModel,
             {
                 [RUNS_PER_LHC_PERIOD_PANELS_KEYS.DETECTOR_QUALITIES]: 'Qualities of detectors',
@@ -131,7 +129,10 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
                         },
                     )),
             },
+            {
+                panelClass: ['p2', 'scroll-auto'],
+            }
         ),
-
+        paginationComponent(perLhcPeriodOverviewModel.pagination),
     ]);
 };

From a62e67191d57bbf7b76f262ef46a733d86363e49 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 08:40:40 +0200
Subject: [PATCH 16/24] linter

---
 .../views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
index 4de46482f8..e629b13730 100644
--- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
+++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -308,7 +308,7 @@ export const RunsPerDataPassOverviewPage = ({
                         { classes: getRowClasses },
                         {
                             profile: 'runsPerDataPass',
-                            ...displayOptions,  
+                            ...displayOptions,
                         },
                         { sort: sortModel },
                     ),

From a1c7d2a0290ebfd4ded77d61858a7c9c598933cf Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 08:41:05 +0200
Subject: [PATCH 17/24] linter

---
 .../views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
index cecb81e689..a527fed549 100644
--- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
+++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
@@ -131,7 +131,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
             },
             {
                 panelClass: ['p2', 'scroll-auto'],
-            }
+            },
         ),
         paginationComponent(perLhcPeriodOverviewModel.pagination),
     ]);

From 1e08f43e8979eb86a0064f6108fccbf078a8b2d9 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 08:41:34 +0200
Subject: [PATCH 18/24] linter

---
 lib/public/components/common/table/table.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 0ef98f85fc..3c3101f0e4 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -149,10 +149,12 @@ export const table = (
     const scrollEnabled = horizontalScrollEnabled || verticalScrollEnabled;
     const wrapperClassesExpression = scrollEnabled ? '.fitting-table-wrapper.scroll-auto' : '';
 
-    const optionalTableClassesExpression = freezeFirstColumn && horizontalScrollEnabled ? '.freeze-first-column' : ''
+    const optionalTableClassesExpression = freezeFirstColumn && horizontalScrollEnabled ? '.freeze-first-column' : '';
 
-    const wrappedTableNode = h(wrapperClassesExpression,
-        h(`table.table.table-hover.shadow-level1${optionalTableClassesExpression}`,
+    const wrappedTableNode = h(
+        wrapperClassesExpression,
+        h(
+            `table.table.table-hover.shadow-level1${optionalTableClassesExpression}`,
             {
                 style: `table-layout: ${horizontalScrollEnabled ? 'auto' : 'fixed'}`,
             },
@@ -164,8 +166,9 @@ export const table = (
                     displayedColumns.length,
                 ),
             ],
-    ));
+        ),
+    );
     return scrollEnabled && !verticalScrollEnabled
         ? h('', wrappedTableNode) // Disable y-scroll
-        : wrappedTableNode
+        : wrappedTableNode;
 };

From ff1954d774c14051374accd20c3b0a0c4a02db08 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 10:21:59 +0200
Subject: [PATCH 19/24] fix fng puppeteer

---
 lib/public/view.js | 5 +++--
 package.json       | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/public/view.js b/lib/public/view.js
index c2d4dfa82e..5f5975cbc4 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -137,10 +137,11 @@ export default (model) => {
 const content = (model, pages) => h(
     '#global-container',
     h(
-        '.intermediate-flex-column',
+        '.flex-column',
         {
             key: model.router.params.page,
-            style: 'min-height: 100%',
+            // style: 'min-height: 100%',
+            style: 'height: 100%',
             onupdate: () => {
             },
         },
diff --git a/package.json b/package.json
index 4db26d2bb5..ef35606aad 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "sequelize": "sequelize-cli",
     "start:dev": "nodemon --ignore 'lib/public/**/*.js' lib/main.js",
     "start:prod": "node lib/main.js",
-    "test": "mocha --exit --timeout 0",
+    "test": "mocha --exit --timeout 0 --grep 'QcFlags For Data Pass Creation'",
     "test:subset": "nyc -- mocha --exit --timeout 0 test/scripts/test-${TEST_TYPE}.js && nyc report --report-dir=/usr/src/app/coverage/${TEST_TYPE} --reporter=json",
     "test:subset-local": "mocha --exit --timeout 0 --reporter test/scripts/parallel-local/custom-mocha-reporter.js test/scripts/test-${TEST_TYPE}.js",
     "docker-run": "docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build",

From 2382b271b6a032712a86578456ec9541dbe13660 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 10:26:07 +0200
Subject: [PATCH 20/24] last fix

---
 lib/public/app.css                          | 4 ++--
 lib/public/components/common/table/table.js | 2 +-
 lib/public/view.js                          | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 2342d5cc2a..74fc0facd2 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -207,13 +207,13 @@ th.text-center, td.text-center {
 }
 
 
-.fitting-table-wrapper {
+.sticky-table-wrapper {
     flex: 1 1 auto;
     overflow-y: auto;
     height: 100%;
 }
 
-.fitting-table-wrapper thead {
+.sticky-table-wrapper thead {
     position: sticky;
     top: 0;
     z-index: 3;
diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 3c3101f0e4..5c0be9a792 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -147,7 +147,7 @@ export const table = (
     }
 
     const scrollEnabled = horizontalScrollEnabled || verticalScrollEnabled;
-    const wrapperClassesExpression = scrollEnabled ? '.fitting-table-wrapper.scroll-auto' : '';
+    const wrapperClassesExpression = scrollEnabled ? '.sticky-table-wrapper.scroll-auto' : '';
 
     const optionalTableClassesExpression = freezeFirstColumn && horizontalScrollEnabled ? '.freeze-first-column' : '';
 
diff --git a/lib/public/view.js b/lib/public/view.js
index 5f5975cbc4..774651a0ad 100644
--- a/lib/public/view.js
+++ b/lib/public/view.js
@@ -140,7 +140,6 @@ const content = (model, pages) => h(
         '.flex-column',
         {
             key: model.router.params.page,
-            // style: 'min-height: 100%',
             style: 'height: 100%',
             onupdate: () => {
             },

From d240e0ccffa6f410955a15db7d29ac87b8fdbbcb Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 10:29:17 +0200
Subject: [PATCH 21/24] typo

---
 lib/public/components/common/table/table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/table/table.js
index 5c0be9a792..5ce2d4fbe4 100644
--- a/lib/public/components/common/table/table.js
+++ b/lib/public/components/common/table/table.js
@@ -90,7 +90,7 @@ const parseColumnsConfiguration = (columns, currentProfile) => {
  * @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,
+ * whole page vertical scroll otherwise. Note that for this option to work,
  * all predecesors of the node returned by this function must have display property column-flex and height: 100%
  */
 

From 04431a92ab8b46ad98afe76b40c5a38c89994f60 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 10:30:07 +0200
Subject: [PATCH 22/24] cleanup

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ef35606aad..4db26d2bb5 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "sequelize": "sequelize-cli",
     "start:dev": "nodemon --ignore 'lib/public/**/*.js' lib/main.js",
     "start:prod": "node lib/main.js",
-    "test": "mocha --exit --timeout 0 --grep 'QcFlags For Data Pass Creation'",
+    "test": "mocha --exit --timeout 0",
     "test:subset": "nyc -- mocha --exit --timeout 0 test/scripts/test-${TEST_TYPE}.js && nyc report --report-dir=/usr/src/app/coverage/${TEST_TYPE} --reporter=json",
     "test:subset-local": "mocha --exit --timeout 0 --reporter test/scripts/parallel-local/custom-mocha-reporter.js test/scripts/test-${TEST_TYPE}.js",
     "docker-run": "docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build",

From 35a28edb531d88c59bcc5aab80d86215056aea9f Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 10:47:50 +0200
Subject: [PATCH 23/24] fix

---
 lib/public/app.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/public/app.css b/lib/public/app.css
index 74fc0facd2..145f6d47c1 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -208,9 +208,7 @@ th.text-center, td.text-center {
 
 
 .sticky-table-wrapper {
-    flex: 1 1 auto;
     overflow-y: auto;
-    height: 100%;
 }
 
 .sticky-table-wrapper thead {

From 4c2f7b99905ed50a206b5962e3f5ef1b8a60ac56 Mon Sep 17 00:00:00 2001
From: xsalonx <lukasz.dubiel3@gmail.com>
Date: Wed, 23 Jul 2025 11:02:47 +0200
Subject: [PATCH 24/24] Revert "fix"

This reverts commit 35a28edb531d88c59bcc5aab80d86215056aea9f.
---
 lib/public/app.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/public/app.css b/lib/public/app.css
index 145f6d47c1..74fc0facd2 100644
--- a/lib/public/app.css
+++ b/lib/public/app.css
@@ -208,7 +208,9 @@ th.text-center, td.text-center {
 
 
 .sticky-table-wrapper {
+    flex: 1 1 auto;
     overflow-y: auto;
+    height: 100%;
 }
 
 .sticky-table-wrapper thead {