From 58d6ad2ed24f9f79b69118950f7b7cd8fc36efcd Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Mon, 1 Sep 2025 20:13:15 +0200
Subject: [PATCH] Improves header animation performance

Simplifies header animation logic by leveraging CSS Grid for height transitions.

This change removes the direct height animation of the calendar header and relies on CSS Grid's auto row feature to manage the header expansion.
It also removes the manual spacer height calculations in Typescript, and relies on CSS variables to control this.
This results in a smoother and more efficient animation, especially when all-day events are present.
---
 src/renderers/GridStyleManager.ts   | 20 --------------------
 src/renderers/HeaderRenderer.ts     | 13 +------------
 wwwroot/css/calendar-layout-css.css | 11 +----------
 3 files changed, 2 insertions(+), 42 deletions(-)

diff --git a/src/renderers/GridStyleManager.ts b/src/renderers/GridStyleManager.ts
index e5dfabe..c60e0d2 100644
--- a/src/renderers/GridStyleManager.ts
+++ b/src/renderers/GridStyleManager.ts
@@ -87,24 +87,4 @@ export class GridStyleManager {
     }
   }
 
-  /**
-   * Update spacer heights based on all-day events
-   */
-  public updateSpacerHeights(allDayEventCount: number = 1): void {
-    const eventHeight = 26; // Height per all-day event in pixels
-    const padding = 0; // Top/bottom padding
-    const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
-    
-    // Set CSS variable for dynamic spacer height
-    document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
-    
-  }
-
-  /**
-   * Get current column count
-   */
-  public getColumnCount(resourceData: ResourceCalendarData | null = null): number {
-    const calendarType = this.config.getCalendarMode();
-    return this.calculateColumnCount(calendarType, resourceData);
-  }
 }
\ No newline at end of file
diff --git a/src/renderers/HeaderRenderer.ts b/src/renderers/HeaderRenderer.ts
index 89463b1..74c82d6 100644
--- a/src/renderers/HeaderRenderer.ts
+++ b/src/renderers/HeaderRenderer.ts
@@ -61,18 +61,8 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
       calendarHeader.appendChild(allDayContainer);
     }
     
-    // Animate header, spacer, and container simultaneously
+    // Animate container and spacer - CSS Grid auto row will handle header expansion
     const animations = [
-      // Header height animation
-      calendarHeader.animate([
-        { height: `${currentHeaderHeight}px` },
-        { height: `${targetHeight}px` }
-      ], {
-        duration: 150,
-        easing: 'ease-out',
-        fill: 'forwards'
-      }),
-      
       // Container visibility and height animation
       allDayContainer.animate([
         { height: '0px', opacity: '0' },
@@ -105,7 +95,6 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
       
       // Notify ScrollManager about header height change
       eventBus.emit('header:height-changed');
-      
     });
   }
 
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 477752b..9c48645 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -151,15 +151,11 @@ swp-calendar-header {
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
   height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
-  transition: height 150ms ease;
   
   /* Force scrollbar to appear for alignment */
   overflow-y: scroll;
   overflow-x: hidden;
   
-  /* Ensure there's scrollable content by adding min-height slightly larger than container */
-  min-height: calc(var(--header-height) + var(--all-day-row-height) + 1px);
-  
   /* Firefox - hide scrollbar but keep space */
   scrollbar-width: auto; /* Normal width to match content scrollbar */
   scrollbar-color: transparent transparent;
@@ -273,16 +269,11 @@ swp-allday-container {
   grid-row: 2; /* Second row of calendar header */
   display: grid;
   grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
-  grid-template-rows: repeat(1, var(--all-day-event-height)); /* Default to 1 row, dynamically updated by JS */
+  grid-template-rows: repeat(1, auto); /* Default to 1 row, dynamically updated by JS */
   gap: 2px;
   padding: 2px;
   align-items: center;
   overflow: hidden;
-  
-  /* Initially hidden - no CSS transitions, use Web Animations API */
-  height: var(--all-day-row-height);
-  min-height: 0;
-  opacity: 0;
 }
 
 /* All-day events in containers */