From 1822fa72873d5c84bca5e237a02477d73aa6b1cf Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Tue, 29 Jul 2025 01:01:12 +0200
Subject: [PATCH] Improves sticky header and time axis layering

Adjusts z-index values to ensure the week header and header spacer
elements cover the time axis during scrolling. This prevents visual
artifacts and improves the overall user experience.
---
 wwwroot/css/calendar-layout-css.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 201b7f9..64d430d 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -54,6 +54,8 @@ swp-header-spacer {
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
+  z-index: 5; /* Higher than time-axis to cover it when scrolling */
+  position: relative;
 }
 
 /* Right header spacer */
@@ -85,7 +87,7 @@ swp-time-axis {
   border-right: 1px solid var(--color-border);
   position: sticky;
   left: 0;
-  z-index: 4;
+  z-index: 3; /* Lower than header elements so it scrolls behind them */
   width: 60px;
   display: flex;
   flex-direction: column;
@@ -154,7 +156,7 @@ swp-week-header {
   border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: 5; /* Higher than time-axis to cover it when scrolling */
   height: 80px; /* Fixed height */
 }