[~] Sticky header for tables in modals CactuseSecurity#2993

Author: SolidProgramming

roles/ui/files/FWO.UI/Pages/NetworkModelling/ShowHistory.razor

@@ -23,7 +23,7 @@
                 </Authorized>
             </AuthorizeView>
             <PageSizeComponent PageSizeCallback="UpdatePageSize"></PageSizeComponent>
-            <Table PageSize="PageSize" class="table table-bordered th-bg-secondary table-responsive" TableItem="ModellingHistoryEntry" Items="history">
+            <Table PageSize="PageSize" class="table table-bordered th-bg-secondary table-responsive sticky-header" TableItem="ModellingHistoryEntry" Items="history">
                 <Column TableItem="ModellingHistoryEntry" Title="@(userConfig.GetText("application"))" Field="@(x => x.AppId)" Sortable="true" Filterable="true">
                     <Template>
                         @(Applications.FirstOrDefault(x => x.Id == context.AppId)?.Name ?? context.AppId.ToString())

roles/ui/files/FWO.UI/Shared/PopUp.razor.css

@@ -10,6 +10,7 @@
 .custom-modal-xl {
     max-width: 80vw;
     margin-top: 3em;
+    --bs-custom-modal-margin-top: -3em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -21,6 +22,7 @@
 .custom-modal-lg {
     max-width: 60vw;
     margin-top: 8em;
+    --bs-custom-modal-margin-top: -8em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -32,6 +34,7 @@
 .custom-modal-md {
     max-width: 40vw;
     margin-top: 12em;
+    --bs-custom-modal-margin-top: -12em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -43,6 +46,7 @@
 .custom-modal-sm {
     max-width: 30vw;
     margin-top: 16em;
+    --bs-custom-modal-margin-top: -16em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -54,6 +58,7 @@
 .custom-modal-xs {
     max-width: 30vw;
     margin-top: 16em;
+    --bs-custom-modal-margin-top: -16em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -78,5 +83,5 @@
     padding: 2em 2em 0 2em;
     background-color: rgba(255, 255, 255, 1);
     overflow-y: auto;
-    /*overflow-x: hidden;*/
+    /*overflow-x: hidden;*/    
 }

roles/ui/files/FWO.UI/wwwroot/css/site.css

@@ -546,4 +546,12 @@ div.modal-body > div.table-responsive {
 
 div.modal-body > * > div.table-responsive {
     overflow-x: inherit;
+}
+
+div.modal-body > div.table-responsive > table.sticky-header thead {
+    top: var(--bs-custom-modal-margin-top);
+}
+
+div.modal-body > div.m-2 > div.table-responsive > table.sticky-header thead {
+    top: calc(var(--bs-custom-modal-margin-top) + .5rem);
 }