Stretch story calendar detail panel

PlotLine.Tests/Program.cs

@@ -7524,6 +7524,8 @@ static void StoryCalendarDaySelectionUsesProgressiveAjaxHooks()
     Assert(script.Contains("loadCalendarSurface(link.href", StringComparison.Ordinal), "Calendar links should load the full calendar surface asynchronously.");
     Assert(script.Contains("buildFilterUrl(form)", StringComparison.Ordinal), "Calendar dropdown/form changes should load the calendar surface asynchronously.");
     Assert(script.Contains("root.innerHTML = await response.text()", StringComparison.Ordinal), "AJAX calendar navigation should replace the calendar section.");
+    Assert(script.Contains("syncDetailHeight", StringComparison.Ordinal), "Calendar details should be height-synchronised with the rendered month grid.");
+    Assert(script.Contains("ResizeObserver", StringComparison.Ordinal), "Calendar detail height should update when the rendered month grid changes.");
     Assert(script.Contains("window.history.pushState", StringComparison.Ordinal), "Calendar date clicks should preserve selected-date URL state.");
     Assert(script.Contains("popstate", StringComparison.Ordinal), "Browser back/forward should reload the calendar surface without a full page reload.");
 }

PlotLine/wwwroot/css/site.css

@@ -1522,7 +1522,9 @@ body.timeline-inspector-resizing {
   display: grid;
   align-content: start;
   gap: 0.8rem;
-  max-height: 780px;
+  height: 100%;
+  max-height: none;
+  min-height: 0;
   overflow: auto;
   border-top: 0;
   border-right: 0;

PlotLine/wwwroot/js/story-calendar.js

@@ -6,6 +6,7 @@
 
   const calendarRoot = () => document.querySelector(rootSelector);
   const calendarDetail = () => calendarRoot()?.querySelector("[data-story-calendar-detail]");
+  let detailResizeObserver = null;
 
   const eventElement = (event) => event.target instanceof Element ? event.target : null;
 
@@ -51,6 +52,7 @@
 
       root.innerHTML = await response.text();
       root.removeAttribute("aria-busy");
+      watchCalendarHeight();
 
       if (window.history?.pushState && historyMode !== "none") {
         const nextUrl = new URL(url, window.location.href);
@@ -86,6 +88,33 @@
     return url.toString();
   };
 
+  const syncDetailHeight = () => {
+    const month = calendarRoot()?.querySelector(".story-calendar-month");
+    const detail = calendarDetail();
+    if (!month || !detail) {
+      return;
+    }
+
+    const monthHeight = Math.ceil(month.getBoundingClientRect().height);
+    if (monthHeight > 0) {
+      detail.style.height = `${monthHeight}px`;
+      detail.style.maxHeight = `${monthHeight}px`;
+    }
+  };
+
+  const watchCalendarHeight = () => {
+    detailResizeObserver?.disconnect();
+    detailResizeObserver = null;
+
+    const month = calendarRoot()?.querySelector(".story-calendar-month");
+    if (window.ResizeObserver && month) {
+      detailResizeObserver = new ResizeObserver(syncDetailHeight);
+      detailResizeObserver.observe(month);
+    }
+
+    window.requestAnimationFrame(syncDetailHeight);
+  };
+
   const initialise = () => {
     if (!calendarRoot() || !window.fetch) {
       return;
@@ -130,6 +159,9 @@
     window.addEventListener("popstate", async () => {
       await loadCalendarSurface(window.location.href, "none");
     });
+
+    window.addEventListener("resize", syncDetailHeight);
+    watchCalendarHeight();
   };
 
   if (document.readyState === "loading") {