Adds scroll synchronization for calendar view

Introduces ScrollManager to synchronize time axis and header scrolling

Improves user experience by keeping time axis and header aligned during scrolling
Enables dynamic vertical and horizontal scroll tracking for calendar components

src/v2/V2CompositionRoot.ts

@@ -9,6 +9,7 @@ import { TeamRenderer } from './features/team/TeamRenderer';
 import { RendererRegistry } from './core/RendererRegistry';
 import { CalendarOrchestrator } from './core/CalendarOrchestrator';
 import { TimeAxisRenderer } from './features/timeaxis/TimeAxisRenderer';
+import { ScrollManager } from './core/ScrollManager';
 import { MockTeamStore, MockResourceStore } from './demo/MockStores';
 import { DemoApp } from './demo/DemoApp';
 
@@ -45,6 +46,7 @@ export function createV2Container(): Container {
   // CalendarOrchestrator modtager IGroupingStore[] automatisk (array injection)
   builder.registerType(CalendarOrchestrator).as<CalendarOrchestrator>();
   builder.registerType(TimeAxisRenderer).as<TimeAxisRenderer>();
+  builder.registerType(ScrollManager).as<ScrollManager>();
 
   // Demo app
   builder.registerType(DemoApp).as<DemoApp>();

src/v2/core/ScrollManager.ts

@@ -0,0 +1,23 @@
+export class ScrollManager {
+  private scrollableContent!: HTMLElement;
+  private timeAxisContent!: HTMLElement;
+  private calendarHeader!: HTMLElement;
+
+  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.scrollableContent.addEventListener('scroll', () => this.onScroll());
+  }
+
+  private onScroll(): void {
+    const { scrollTop, scrollLeft } = this.scrollableContent;
+
+    // Synkroniser time-axis vertikalt
+    this.timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
+
+    // Synkroniser header horisontalt
+    this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
+  }
+}

src/v2/demo/DemoApp.ts

@@ -2,6 +2,7 @@ import { CalendarOrchestrator } from '../core/CalendarOrchestrator';
 import { TimeAxisRenderer } from '../features/timeaxis/TimeAxisRenderer';
 import { NavigationAnimator } from '../core/NavigationAnimator';
 import { DateService } from '../core/DateService';
+import { ScrollManager } from '../core/ScrollManager';
 import { ViewConfig } from '../core/ViewConfig';
 
 export class DemoApp {
@@ -13,7 +14,8 @@ export class DemoApp {
   constructor(
     private orchestrator: CalendarOrchestrator,
     private timeAxisRenderer: TimeAxisRenderer,
-    private dateService: DateService
+    private dateService: DateService,
+    private scrollManager: ScrollManager
   ) {}
 
   init(): void {
@@ -49,6 +51,9 @@ export class DemoApp {
     // Render time axis
     this.timeAxisRenderer.render(document.getElementById('time-axis') as HTMLElement);
 
+    // Init scroll synkronisering
+    this.scrollManager.init(this.container);
+
     // Setup event handlers
     this.setupNavigation();
     this.setupViewSwitchers();

wwwroot/css/calendar-v2.css

@@ -2,6 +2,8 @@
   --hour-height: 60px;
   --time-axis-width: 60px;
   --grid-columns: 5;
+  --day-start-hour: 0;
+  --day-end-hour: 24;
   --color-border: #e0e0e0;
   --color-surface: #fff;
   --color-text-secondary: #666;
@@ -68,6 +70,7 @@ swp-calendar-container {
   grid-template-columns: var(--time-axis-width) 1fr;
   grid-template-rows: auto 1fr;
   overflow: hidden;
+  height: 100%;
 }
 
 /* Time axis */
@@ -78,6 +81,7 @@ swp-time-axis {
   grid-template-rows: subgrid;
   border-right: 1px solid var(--color-border);
   background: var(--color-surface);
+  overflow: hidden;
 }
 
 swp-header-spacer {
@@ -85,8 +89,8 @@ swp-header-spacer {
 }
 
 swp-time-axis-content {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-auto-rows: var(--hour-height);
   overflow: hidden;
 }
 
@@ -108,19 +112,31 @@ swp-grid-container {
 }
 
 /* Viewport/Track for slide animation */
-swp-header-viewport,
+swp-header-viewport {
-swp-content-viewport {
   overflow: hidden;
 }
 
-swp-header-track,
+swp-content-viewport {
-swp-content-track {
+  overflow: hidden;
+  min-height: 0; /* Tillader at krympe i grid */
+}
+
+swp-header-track {
   display: flex;
 }
 
-swp-header-track > swp-calendar-header,
+swp-content-track {
+  display: flex;
+  height: 100%;
+}
+
+swp-header-track > swp-calendar-header {
+  flex: 0 0 100%;
+}
+
 swp-content-track > swp-scrollable-content {
   flex: 0 0 100%;
+  height: 100%;
 }
 
 /* Header */
@@ -129,6 +145,16 @@ swp-calendar-header {
   grid-template-columns: repeat(var(--grid-columns), 1fr);
   grid-auto-rows: auto;
   background: var(--color-surface);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+swp-calendar-header::-webkit-scrollbar {
+  background: transparent;
+}
+
+swp-calendar-header::-webkit-scrollbar-thumb {
+  background: transparent;
 }
 
 swp-calendar-header[data-levels="date"] > swp-day-header { grid-row: 1; }
@@ -182,7 +208,7 @@ swp-scrollable-content {
 swp-time-grid {
   display: block;
   position: relative;
-  min-height: calc(15 * var(--hour-height));
+  min-height: calc((var(--day-end-hour) - var(--day-start-hour)) * var(--hour-height));
 }
 
 swp-grid-lines {