From dee977d4dfd11bc917acf26a0f021769569248de Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Sun, 7 Dec 2025 23:25:02 +0100
Subject: [PATCH] Refactors header and scroll management logic

Updates ScrollManager to dynamically sync header spacer height using ResizeObserver

Removes explicit spacer animation from HeaderDrawerManager
Simplifies header and scroll interaction by moving height synchronization logic to ScrollManager
---
 src/v2/core/HeaderDrawerManager.ts |  6 +++---
 src/v2/core/ScrollManager.ts       | 16 ++++++++++++++++
 wwwroot/css/calendar-v2.css        | 17 +++++++++++++----
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/v2/core/HeaderDrawerManager.ts b/src/v2/core/HeaderDrawerManager.ts
index ac2a838..8db94d6 100644
--- a/src/v2/core/HeaderDrawerManager.ts
+++ b/src/v2/core/HeaderDrawerManager.ts
@@ -1,13 +1,13 @@
 export class HeaderDrawerManager {
   private drawer!: HTMLElement;
-  private spacer!: HTMLElement;
   private expanded = false;
   private readonly expandedHeight = 24;
   private readonly duration = 200;
 
   init(container: HTMLElement): void {
     this.drawer = container.querySelector('swp-header-drawer')!;
-    this.spacer = container.querySelector('swp-header-spacer')!;
+
+    if (!this.drawer) console.error('HeaderDrawerManager: swp-header-drawer not found');
   }
 
   toggle(): void {
@@ -37,8 +37,8 @@ export class HeaderDrawerManager {
       fill: 'forwards'
     };
 
+    // Kun animér drawer - ScrollManager synkroniserer header-spacer via ResizeObserver
     this.drawer.animate(keyframes, options);
-    this.spacer.animate(keyframes, options);
   }
 
   isExpanded(): boolean {
diff --git a/src/v2/core/ScrollManager.ts b/src/v2/core/ScrollManager.ts
index 3e4fbd5..c877d81 100644
--- a/src/v2/core/ScrollManager.ts
+++ b/src/v2/core/ScrollManager.ts
@@ -2,13 +2,29 @@ export class ScrollManager {
   private scrollableContent!: HTMLElement;
   private timeAxisContent!: HTMLElement;
   private calendarHeader!: HTMLElement;
+  private headerViewport!: HTMLElement;
+  private headerSpacer!: HTMLElement;
+  private resizeObserver!: ResizeObserver;
 
   init(container: HTMLElement): void {
     this.scrollableContent = container.querySelector('swp-scrollable-content')!;
     this.timeAxisContent = container.querySelector('swp-time-axis-content')!;
     this.calendarHeader = container.querySelector('swp-calendar-header')!;
+    this.headerViewport = container.querySelector('swp-header-viewport')!;
+    this.headerSpacer = container.querySelector('swp-header-spacer')!;
 
     this.scrollableContent.addEventListener('scroll', () => this.onScroll());
+
+    // Synkroniser header-spacer højde med header-viewport
+    this.resizeObserver = new ResizeObserver(() => this.syncHeaderSpacerHeight());
+    this.resizeObserver.observe(this.headerViewport);
+    this.syncHeaderSpacerHeight();
+  }
+
+  private syncHeaderSpacerHeight(): void {
+    // Kopier den faktiske computed height direkte fra header-viewport
+    const computedHeight = getComputedStyle(this.headerViewport).height;
+    this.headerSpacer.style.height = computedHeight;
   }
 
   private onScroll(): void {
diff --git a/wwwroot/css/calendar-v2.css b/wwwroot/css/calendar-v2.css
index 66633c9..de3e09b 100644
--- a/wwwroot/css/calendar-v2.css
+++ b/wwwroot/css/calendar-v2.css
@@ -5,6 +5,7 @@
   --day-column-min-width: 200px;
   --day-start-hour: 6;
   --day-end-hour: 18;
+  --header-height: 70px;
   --color-border: #e0e0e0;
   --color-surface: #fff;
   --color-text-secondary: #666;
@@ -81,12 +82,16 @@ swp-time-axis {
   grid-column: 1;
   grid-row: 1 / 3;
   display: grid;
-  grid-template-rows: subgrid;
+  grid-template-rows: auto 1fr;
   border-right: 1px solid var(--color-border);
   background: var(--color-surface);
   overflow: hidden;
 }
 
+swp-header-spacer {
+  border-bottom: 1px solid var(--color-border);
+}
+
 swp-header-drawer {
   display: block;
   height: 0;
@@ -96,9 +101,9 @@ swp-header-drawer {
 }
 
 swp-time-axis-content {
-  display: grid;
-  grid-auto-rows: var(--hour-height);
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 swp-hour-marker {
@@ -118,6 +123,10 @@ swp-hour-marker {
     height: 1px;
     background: var(--color-hour-line);
   }
+
+  &:first-child::after {
+    display: none;
+  }
 }
 
 /* Grid container */