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/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');
-      
     });
   }