Merge pull request CactuseSecurity#3096 from SolidProgramming/issue_2993

Merge: show more clearly if everything is (horizontally) displayed

Author: tpurschke

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

@@ -1,4 +1,4 @@
-@attribute [Authorize(Roles = $"{Roles.Admin}, {Roles.Auditor}")]
+@attribute [Authorize(Roles = $"{Roles.Admin}, {Roles.Auditor}")]
 
 @inject ApiConnection apiConnection
 @inject UserConfig userConfig
@@ -23,7 +23,7 @@
                 </Authorized>
             </AuthorizeView>
             <PageSizeComponent PageSizeCallback="UpdatePageSize"></PageSizeComponent>
-            <Table PageSize="PageSize" class="table table-bordered th-bg-secondary table-responsive overflow-auto sticky-header" 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

@@ -1,6 +1,12 @@
+/* !! ATTENTION: When changing the margin-top values of the custom-modal-x classes you 
+    HAVE to change the --bs-custom-modal-margin-top respectively
+    or the sticky header for tables in the modals will look weird !!
+*/
+
 .custom-modal-fs {
     --bs-modal-width: 100vw;
     height: 100vh;
+    --bs-custom-modal-margin-top: -3em;
 }
 
 .custom-modal-content-fs {
@@ -10,6 +16,7 @@
 .custom-modal-xl {
     max-width: 80vw;
     margin-top: 3em;
+    --bs-custom-modal-margin-top: -3em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -21,6 +28,7 @@
 .custom-modal-lg {
     max-width: 60vw;
     margin-top: 8em;
+    --bs-custom-modal-margin-top: -8em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -32,6 +40,7 @@
 .custom-modal-md {
     max-width: 40vw;
     margin-top: 12em;
+    --bs-custom-modal-margin-top: -12em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -43,6 +52,7 @@
 .custom-modal-sm {
     max-width: 30vw;
     margin-top: 16em;
+    --bs-custom-modal-margin-top: -16em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -54,6 +64,7 @@
 .custom-modal-xs {
     max-width: 30vw;
     margin-top: 16em;
+    --bs-custom-modal-margin-top: -16em;
     margin-left: auto;
     margin-right: auto;
 }
@@ -78,5 +89,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

@@ -539,3 +539,19 @@ max-width: 99%;
 {
     padding-bottom: 30px;
 } */
+
+div.modal-body > div.table-responsive {
+    overflow-x: inherit;
+}
+
+div.modal-body > * > div.table-responsive {
+    overflow-x: inherit;
+}
+
+div.modal-body > div.table-responsive > table.sticky-header thead {
+    top: calc(var(--bs-custom-modal-margin-top) + 1em - 1px);
+}
+
+div.modal-body > * > div.table-responsive > table.sticky-header thead {
+    top: calc(var(--bs-custom-modal-margin-top) + 1em - 1px);
+}