Fix help component z-index

7 files changed, 71 insertions, 45 deletions

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 4a32ad2d7..5f3e15d80 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -21,7 +21,6 @@
   top: 0;
   width: 100%;
   background-color: pvar(--mainBackgroundColor);
-  z-index: z(header);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
 }
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index af8cb3b17..360a476f6 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -25,7 +25,6 @@
 <span
   role="button"
   class="help-tooltip-button"
-  container="body"
   [title]="title"
   tabindex=0
   popoverClass="help-popover"
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 1427faca4..32fafb446 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -19,7 +19,6 @@
 
 ::ng-deep {
   .help-popover {
-    z-index: z(help-popover) !important;
     max-width: 300px;
 
     .popover-body {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 81bbfa43a..84b575eb3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -17,6 +17,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import './bootstrap';
 @import './primeng-custom';
 
+@import './z-index';
+
 [hidden] {
   display: none !important;
 }
@@ -324,10 +326,6 @@ table {
   margin-top: 10px;
 }
 
-ngx-loading-bar {
-  z-index: z(header) + 1 !important;
-}
-
 @media screen and (max-width: #{breakpoint(xxl)}) {
   .main-col {
     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index b0a18e6f2..bc37134dd 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -58,33 +58,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
-/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown,
-.dropup {
-  z-index: z(dropdown) !important;
-}
-
-.list-overflow-menu,
-.parent-entry {
-  z-index: z(menu) - 1 !important;
-}
-
-.btn-group,
-.dropdown-root,
-.action-dropdown,
-.input-group-prepend,
-.column-toggle {
-  z-index: inherit !important;
-}
-
 .btn-group > .btn:not(:first-child) {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
 
 .dropdown-menu {
-  z-index: z(dropdown) + 1 !important;
-
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
@@ -302,22 +281,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   margin: 0.3rem 0;
 }
 
-ngb-modal-backdrop {
-  z-index: z(modal) - 1 !important;
-}
-
-ngb-modal-window {
-  z-index: z(modal) !important;
-}
-
-ngb-popover-window {
-  z-index: z(popover) !important;
-}
-
-ngb-tooltip-window {
-  z-index: z(tooltip) !important;
-}
-
 .btn-outline-secondary {
   border-color: $input-border-color;
 
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ace0fd63a..9fc010d4f 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -898,7 +898,6 @@ p-toast {
     width: auto;
     max-width: 300px;
     min-width: 200px;
-    z-index: z(notification) !important;
 
     .p-toast-icon-close {
       font-family: "Glyphicons Halflings";
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
new file mode 100644
index 000000000..e46813dc3
--- /dev/null
+++ b/client/src/sass/z-index.scss
@@ -0,0 +1,69 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.header {
+  z-index: z(header);
+}
+
+.help-popover {
+  z-index: z(help-popover);
+}
+
+ngx-loading-bar {
+  z-index: z(header) + 1 !important;
+}
+
+/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
+.dropdown,
+.dropup {
+  z-index: z(dropdown) !important;
+}
+
+.list-overflow-menu,
+.parent-entry {
+  z-index: z(menu) - 1 !important;
+}
+
+.btn-group,
+.dropdown-root,
+.action-dropdown,
+.input-group-prepend,
+.column-toggle {
+  z-index: inherit !important;
+}
+
+.dropdown-menu {
+  z-index: z(dropdown) + 1 !important;
+}
+
+p-toast .p-toast {
+  z-index: z(notification) !important;
+}
+
+ngb-modal-backdrop {
+  z-index: z(modal) - 1 !important;
+}
+
+ngb-popover-window {
+  z-index: z(popover) !important;
+}
+
+ngb-tooltip-window {
+  z-index: z(tooltip) !important;
+}
+
+ngb-modal-window {
+  z-index: z(modal) !important;
+
+  ngb-tooltip-window {
+    z-index: z(modal + 1) !important;
+  }
+
+  ngb-popover-window {
+    z-index: z(modal + 1) !important;
+  }
+
+  .help-popover {
+    z-index: z(modal + 1) !important;
+  }
+}