Improves header animation performance.

Refactors the header animation to animate the calendar header's height instead of just the all-day container.

This change improves the perceived performance of the animation. It also reduces animation duration.

src/renderers/HeaderRenderer.ts

@@ -115,13 +115,17 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
     
     if (!calendarHeader || !allDayContainer) return;
     
+    // Get current parent height for animation
+    const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
+    const heightDifference = targetHeight - currentHeight;
+    const targetParentHeight = currentParentHeight + heightDifference;
+    
     const animations = [
-      // Container height animation
+      calendarHeader.animate([
-      allDayContainer.animate([
+        { height: `${currentParentHeight}px` },
-        { height: `${currentHeight}px`, opacity: currentHeight > 0 ? '1' : '0' },
+        { height: `${targetParentHeight}px` }
-        { height: `${targetHeight}px`, opacity: '1' }
       ], {
-        duration: 1000,
+        duration: 300,
         easing: 'ease-out',
         fill: 'forwards'
       })
@@ -137,7 +141,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
           { height: `${currentSpacerHeight}px` },
           { height: `${targetSpacerHeight}px` }
         ], {
-          duration: 1000,
+          duration: 300,
           easing: 'ease-out',
           fill: 'forwards'
         })

wwwroot/css/calendar-layout-css.css

@@ -273,7 +273,6 @@ swp-allday-container {
   padding: 2px;
   align-items: center;
   overflow: hidden;
-  height: 0px; /* Initial height for Web Animation API */
 }
 
 /* All-day events in containers */