From 02566a6e936f13dfa6f6ad597838ad22efd5ef19 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 2 May 2023 15:49:26 +0200
Subject: [PATCH] fixed hardcoded z-index of overlay, filter and add-btn

---
 webapp/assets/_new/styles/tokens.scss | 2 ++
 webapp/assets/styles/main.scss        | 4 ++--
 webapp/pages/index.vue                | 8 ++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 66bd03ecc..863e0e0b7 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -336,10 +336,12 @@ $ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  */
 
 $z-index-modal: 9999;
+$z-index-overlay: 9000;
 $z-index-dropdown: 8888;
 $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
+$z-index-sticky-float: 150;
 $z-index-sticky: 100;
 $z-index-post-teaser-link: 5;
 $z-index-surface: 1;
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index 144701f83..b726758c7 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -95,7 +95,7 @@ blockquote {
   box-shadow: $box-shadow-base;
   position: fixed;
   width: 100%;
-  z-index: 10;
+  z-index: $z-index-page-submenu;
 
   a {
     outline: none;
@@ -131,7 +131,7 @@ hr {
   left: 0;
   position: fixed;
   background: rgba(0, 0, 0, 0.15);
-  z-index: 99;
+  z-index: $z-index-overlay;
   pointer-events: none;
   transition: opacity 150ms ease-out;
   transition-delay: 50ms;
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 490b1ec8f..7f5bdab1b 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -318,7 +318,7 @@ export default {
   height: 54px;
   width: 54px;
   font-size: 26px;
-  z-index: 100;
+  z-index: $z-index-sticky-float;
   position: fixed;
   bottom: -5px;
   left: 98vw;
@@ -330,7 +330,7 @@ export default {
   height: 54px;
   width: 54px;
   font-size: 26px;
-  z-index: 100;
+  z-index: $z-index-sticky-float;
   position: fixed;
   top: 80px;
   box-shadow: $box-shadow-x-large;
@@ -344,7 +344,7 @@ export default {
 .filterButtonMenu {
   width: 95%;
   position: fixed;
-  z-index: 6;
+  z-index: $z-index-sticky;
   margin-top: -35px;
   padding: 20px 10px 20px 10px;
   background-color: #f5f4f6;
@@ -361,6 +361,7 @@ export default {
   max-height: 950px;
   overflow: auto;
   padding-bottom: 0px;
+  z-index: $z-index-page-submenu;
 }
 @media screen and (min-height: 401px) {
   #my-filter {
@@ -410,7 +411,6 @@ export default {
     height: 44px;
     width: 44px;
     font-size: 23px;
-    z-index: 10;
   }
   .ds-grid {
     padding-top: 1em;