From be4a8af7c4041d5fd0f8c7d13e1e7279e132c5e6 Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Wed, 27 Aug 2025 20:54:06 +0200
Subject: [PATCH] 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      | 16 ++++++++++++++++
 src/renderers/EventRenderer.ts      | 11 +++++++++--
 wwwroot/css/calendar-layout-css.css |  4 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/managers/ColumnDetector.ts b/src/managers/ColumnDetector.ts
index 9255dab..fec7dff 100644
--- a/src/managers/ColumnDetector.ts
+++ b/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`);
     }
   }
 
diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts
index e2fce03..de38ab0 100644
--- a/src/renderers/EventRenderer.ts
+++ b/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`);
   }
 
   /**
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 9caf950..19a03a5 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/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;