Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves sticky header and time axis layering

Browse source 
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.
This commit is contained in:
Janus Knudsen 2025-07-29 01:01:12 +02:00
parent 9f6d4333cb
commit 1822fa7287
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
wwwroot/css/calendar-layout-css.css
View file

@ -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 */
}