Updates all-day event grid row layout

Ensures the all-day event container's grid layout is correctly updated to reflect the number of rows needed, even when the overall height doesn't change.
This prevents layout issues when events are rearranged without triggering a height recalculation.
Also updates the grid template when the height is updated in the BaseEventRenderer.

src/managers/ColumnDetector.ts

@@ -635,11 +635,27 @@ export class ColumnDetector {
       Promise.all(animations.map(anim => anim.finished)).then(() => {
         root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
         
+        // Update grid-template-rows for all swp-allday-containers
+        const allDayContainers = document.querySelectorAll('swp-allday-container');
+        allDayContainers.forEach(container => {
+          const gridRows = `repeat(${maxRow}, var(--allday-event-height, 26px))`;
+          (container as HTMLElement).style.gridTemplateRows = gridRows;
+        });
+        
         // Notify ScrollManager about header height change
         eventBus.emit('header:height-changed');
       });
       
       console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxRow})`);
+    } else {
+      // Height hasn't changed but we still need to update grid-template-rows in case of different row arrangements
+      const allDayContainers = document.querySelectorAll('swp-allday-container');
+      allDayContainers.forEach(container => {
+        const gridRows = `repeat(${maxRow}, var(--allday-event-height, 26px))`;
+        (container as HTMLElement).style.gridTemplateRows = gridRows;
+      });
+      
+      console.log(`All-day height unchanged (${currentAllDayHeight}px) but updated grid-template-rows to ${maxRow} rows`);
     }
   }
 

src/renderers/EventRenderer.ts

@@ -251,7 +251,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
   }
 
   /**
-   * Update all-day row height based on number of rows
+   * Update all-day row height and grid template based on number of rows
    */
   private updateAllDayHeight(maxRows: number): void {
     const root = document.documentElement;
@@ -259,7 +259,14 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     const calculatedHeight = maxRows * eventHeight;
     root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
     
-    console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px for ${maxRows} rows`);
+    // Update grid-template-rows for all swp-allday-containers
+    const allDayContainers = document.querySelectorAll('swp-allday-container');
+    allDayContainers.forEach(container => {
+      const gridRows = `repeat(${maxRows}, var(--allday-event-height, 26px))`;
+      (container as HTMLElement).style.gridTemplateRows = gridRows;
+    });
+    
+    console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px and grid-template-rows to ${maxRows} rows`);
   }
 
   /**

wwwroot/css/calendar-layout-css.css

@@ -267,13 +267,13 @@ swp-day-header[data-today="true"] swp-day-date {
 }
 
 
-/* All-day container - simple container that expands with auto-rows */
+/* All-day container - simple container with dynamic grid-template-rows */
 swp-allday-container {
   grid-column: 1 / -1; /* Span all columns */
   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-auto-rows: var(--allday-event-height, 26px); /* Auto-expand rows as needed */
+  grid-template-rows: repeat(1, var(--allday-event-height, 26px)); /* Default to 1 row, dynamically updated by JS */
   gap: 2px;
   padding: 2px;
   align-items: center;