From 51b0928489664f0cf932e5bd44280041ffd90a47 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sat, 27 Dec 2025 09:54:17 +0100
Subject: [PATCH] fix mobile header shadow appearing over hamburger menu

Separate the drop shadow from the button wrapper into its own fixed
element with a lower z-index. This prevents the shadow from appearing
over the hamburger menu when it's pulled out on mobile.

- Create separate button_wrapper_shadow element
- Move box-shadow styling to shadow element
- Set shadow z-index to 9 to stay below menu but above page content
- Use fixed positioning with pointer-events: none
---
 src/lib/components/Header.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 88d4b62..9c6f909 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -112,8 +112,17 @@ footer{
 }
 
 @media screen and (max-width: 800px) {
-	.button_wrapper{
+	.button_wrapper_shadow{
 		box-shadow: 0 1em 1rem 0rem rgba(0,0,0,0.4);
+		position: fixed;
+		width: 100%;
+		height: 4rem;
+		top: 0;
+		left: 0;
+		z-index: 9;
+		pointer-events: none;
+	}
+	.button_wrapper{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -194,6 +203,7 @@ footer{
 </style>
 <div class=wrapper lang=de>
 <div>
+<span class=button_wrapper_shadow></span>
 <div class=button_wrapper>
 <a href="/"><Symbol></Symbol></a>
 <div class="right-buttons">