From 14d36095758b79bc154b02f81f9cf2b8ec4da432 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Wed, 22 Oct 2025 09:22:14 +0200 Subject: [PATCH] fix: Update z-indices to avoid layouting issues --- assets/js/contentNavigation.js | 4 ++-- assets/js/search.js | 4 ++-- assets/sass/anchorlink.scss | 2 +- assets/sass/contentNavigation.scss | 2 +- assets/sass/dropdown.scss | 1 - assets/sass/interactiveMap.scss | 1 - assets/sass/navigation.scss | 8 ++++---- assets/sass/search.scss | 12 +++++++----- assets/sass/styles.scss | 9 ++++++--- 9 files changed, 23 insertions(+), 20 deletions(-) diff --git a/assets/js/contentNavigation.js b/assets/js/contentNavigation.js index 236c06c2..69b21c82 100644 --- a/assets/js/contentNavigation.js +++ b/assets/js/contentNavigation.js @@ -20,13 +20,13 @@ const initAside = () => { asideContent.removeAttribute("role"); asideContent.setAttribute("aria-hidden", "true"); handleBtn.setAttribute("aria-expanded", "false"); - overlay.classList.remove("overlay--show"); + overlay.classList.remove("overlay--show", "overlay--content"); }; const openSheet = () => { isClosed = false; aside.classList.add("o-aside--open"); - overlay.classList.add("overlay--show"); + overlay.classList.add("overlay--show", "overlay--content"); asideContent.setAttribute("role", "dialog"); asideContent.setAttribute("aria-hidden", "false"); handleBtn.setAttribute("aria-expanded", "true"); diff --git a/assets/js/search.js b/assets/js/search.js index d48bc262..0507071e 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -50,13 +50,13 @@ const initSearch = () => { const closeSearch = () => { search.querySelector(".pagefind-ui__search-clear").click(); - overlay.classList.remove("overlay--show", "overlay--show-lv5"); + overlay.classList.remove("overlay--show", "overlay--search"); search.classList.remove("o-search--show"); updateSearchButtonLabels(false); }; const openSearch = () => { - overlay.classList.add("overlay--show", "overlay--show-lv5"); + overlay.classList.add("overlay--show", "overlay--search"); search.classList.add("o-search--show"); searchElement.focus(); search.scrollIntoView({ behavior: "smooth", block: "start" }); diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss index 7e2a43d1..fcaceb3f 100644 --- a/assets/sass/anchorlink.scss +++ b/assets/sass/anchorlink.scss @@ -88,7 +88,7 @@ align-self: flex-start; margin: 1rem; text-wrap: balance; - z-index: 1000; + z-index: 22; } .a-snackbar--show { diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss index 719718c0..42d34f9c 100644 --- a/assets/sass/contentNavigation.scss +++ b/assets/sass/contentNavigation.scss @@ -5,7 +5,7 @@ font-size: 1.4rem; line-height: 1.5; margin-right: 0; - z-index: 3; + z-index: 8; display: flex; flex-direction: column; gap: 1.5rem; diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss index 7e74f392..e61f6a80 100644 --- a/assets/sass/dropdown.scss +++ b/assets/sass/dropdown.scss @@ -43,7 +43,6 @@ margin-bottom: 0; padding-left: 0; box-shadow: var(--box-shadow); - z-index: 200; border: var(--border); &--above { diff --git a/assets/sass/interactiveMap.scss b/assets/sass/interactiveMap.scss index fdc331e8..1077457c 100644 --- a/assets/sass/interactiveMap.scss +++ b/assets/sass/interactiveMap.scss @@ -22,7 +22,6 @@ display: flex; flex-direction: column; gap: 0.5rem; - z-index: 3; @media print { display: none; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index fe916b4e..00e99ea2 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -4,7 +4,7 @@ top: 0; box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.1); background-color: var(--bg-default); - z-index: 7; + z-index: 14; height: 6rem; padding-left: calc((100vw - 100%) / 2); border-bottom: var(--border); @@ -30,7 +30,7 @@ background-color: rgba(0, 0, 0, 0.8); inset: 0; position: fixed; - z-index: 2; + z-index: 18; } .o-header__nav { @@ -108,7 +108,7 @@ menu > li > menu { background-color: var(--bg-neutral); border-radius: var(--border-radius-s); color: var(--bg-default); - z-index: 100; + z-index: 16; &:focus { opacity: 1; @@ -251,7 +251,7 @@ menu > li > menu { right: 0; width: 70%; height: 100%; - z-index: 4; + z-index: 20; background-color: var(--bg-default); padding: 1rem; overflow-y: scroll; diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 6639342c..2ef3d250 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -1,7 +1,9 @@ +$search-z-index: 12; + #search { width: 100%; display: flex; - z-index: 6; + z-index: $search-z-index; @media print { display: none; @@ -33,7 +35,7 @@ } input.pagefind-ui__search-input { - z-index: 6; + z-index: $search-z-index; outline: 0.2rem solid transparent; border: var(--border); box-shadow: var(--box-shadow); @@ -65,7 +67,7 @@ } .pagefind-ui__form::before { - z-index: 7; + z-index: $search-z-index + 1; } .pagefind-ui__drawer { @@ -75,7 +77,7 @@ overflow: hidden; position: absolute; width: 100%; - z-index: 6; + z-index: $search-z-index; border: var(--border); border-radius: 0 0 var(--border-radius-l) var(--border-radius-l); } @@ -156,6 +158,6 @@ display: block; opacity: 1; visibility: visible; - z-index: 6; + z-index: $search-z-index; } } diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index b5eebf69..1b4dd681 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -389,15 +389,18 @@ details > summary { background-color: rgba(0, 0, 0, 0.6); position: fixed; inset: 0; - z-index: 3; @media print { display: none; } } -.overlay--show-lv5 { - z-index: 5; +.overlay--content { + z-index: 6; +} + +.overlay--search { + z-index: 10; } body:has(.overlay--show) {