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 {