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 */