From 34d46466670401bf1ac5ce073283d874cfcb2c3b Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Wed, 21 Jan 2026 16:30:22 +0100
Subject: [PATCH] generic form table scroll lock for headers

---
 .../FormGeneratorTable.module.css             | 57 ++++++++++---------
 src/layouts/MainLayout.module.css             |  6 +-
 src/pages/admin/Admin.module.css              |  7 +--
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
index 90ea381..bad3817 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
@@ -4,10 +4,10 @@
   gap: 10px;
   width: 100%;
   font-family: var(--font-family);
-  /* Ensure proper height constraints for scrolling */
+  /* Fill available space and constrain height */
   min-height: 0;
   flex: 1;
-  overflow: hidden;
+  /* No overflow - children handle their own scrolling */
 }
 
 .title {
@@ -18,25 +18,18 @@
   margin-bottom: 10px;
 }
 
-/* Table Container - flipped to show horizontal scrollbar at top */
+/* Table Container - scrollable area for table data only */
 .tableContainer {
   position: relative;
   overflow: auto;
   border: 1px solid var(--color-primary);
   border-radius: 25px;
   background: var(--color-bg);
-  /* Fill available space in flex container */
+  /* Fill remaining space after controls */
   flex: 1;
   min-height: 0;
-  /* Ensure scrolling within container */
-  max-height: 100%;
-  /* Flip container to move horizontal scrollbar to top */
-  transform: scaleY(-1);
-}
-
-/* Flip table content back to normal orientation */
-.tableContainer > * {
-  transform: scaleY(-1);
+  /* Clip content to border-radius but allow sticky to work */
+  isolation: isolate;
 }
 
 /* Empty table styling - no extra space, just header */
@@ -77,7 +70,9 @@
 /* Table Styles */
 .table {
   width: 100%;
-  border-collapse: collapse;
+  /* Use separate borders for sticky header support */
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: 14px;
   background: var(--color-bg);
   table-layout: fixed;
@@ -104,10 +99,20 @@
   background-color: rgba(255, 255, 255, 0.05) !important;
 }
 
-.th {
+/* Sticky thead for table header */
+.table thead {
   position: sticky;
-  /* Due to scaleY(-1) transform on container, bottom: 0 acts as top: 0 */
-  bottom: 0;
+  top: 0;
+  z-index: 10;
+  /* Shadow to separate header from scrolled content */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.table thead tr {
+  background: var(--color-bg);
+}
+
+.th {
   background: var(--color-bg);
   padding: 10px 16px;
   text-align: left;
@@ -118,10 +123,10 @@
   overflow-wrap: break-word;
   word-break: break-word;
   user-select: none;
-  z-index: 10;
   overflow: visible;
-  /* Add shadow to visually separate from scrolled content */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* Border separates header from scrolled content */
+  border-bottom: 2px solid var(--color-primary);
+  /* Shadow on the row, not individual cells */
 }
 
 .th.actionsColumn {
@@ -339,11 +344,9 @@
   position: relative;
 }
 
-/* Selection column header sticky */
+/* Selection column header - background inherited from thead */
 thead .selectColumn {
-  position: sticky;
-  bottom: 0;
-  z-index: 10;
+  background: var(--color-bg);
 }
 
 /* Selection Column border only on body cells, not header */
@@ -394,11 +397,9 @@ tbody .selectColumn {
   position: relative;
 }
 
-/* Actions column header sticky */
+/* Actions column header - background inherited from thead */
 thead .actionsColumn {
-  position: sticky;
-  bottom: 0;
-  z-index: 10;
+  background: var(--color-bg);
 }
 
 /* Actions Column border only on body cells, not header */
diff --git a/src/layouts/MainLayout.module.css b/src/layouts/MainLayout.module.css
index 35f7dd9..59c3965 100644
--- a/src/layouts/MainLayout.module.css
+++ b/src/layouts/MainLayout.module.css
@@ -19,7 +19,7 @@
   height: 100%;
   background: var(--surface-color, #f8f9fa);
   border-right: 1px solid var(--border-color, #e0e0e0);
-  overflow: hidden;
+  overflow: visible;
 }
 
 /* Logo */
@@ -81,8 +81,10 @@
 /* Content */
 .content {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   background: var(--bg-primary, #ffffff);
+  display: flex;
+  flex-direction: column;
 }
 
 /* Dark Theme */
diff --git a/src/pages/admin/Admin.module.css b/src/pages/admin/Admin.module.css
index 12933ae..ec020b8 100644
--- a/src/pages/admin/Admin.module.css
+++ b/src/pages/admin/Admin.module.css
@@ -144,10 +144,9 @@
 .tableContainer {
   flex: 1;
   min-height: 0;
-  overflow: auto;
-  background: var(--surface-color);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .loadingContainer {