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 {

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 {

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;
+  display: flex;
-  grid-auto-rows: var(--hour-height);
+  flex-direction: column;
-  overflow: hidden;
+  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 */