From f66ffba0ef6ea339ec255c376cd3a42db3f931b2 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Sun, 22 Feb 2026 01:39:23 +0800
Subject: [PATCH] Fix calendar not resizing when sidebar collapses

Use ResizeObserver on the calendar container to call
FullCalendar.updateSize() when the sidebar transition
changes the available width.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/calendar/CalendarPage.tsx     | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 48d4cfa..67a6099 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import FullCalendar from '@fullcalendar/react';
@@ -51,6 +51,18 @@ export default function CalendarPage() {
 
   const { settings } = useSettings();
   const { data: calendars = [] } = useCalendars();
+  const calendarContainerRef = useRef<HTMLDivElement>(null);
+
+  // Resize FullCalendar when container size changes (e.g. sidebar collapse)
+  useEffect(() => {
+    const el = calendarContainerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      calendarRef.current?.getApi().updateSize();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
 
   const { data: events = [] } = useQuery({
     queryKey: ['calendar-events'],
@@ -270,7 +282,7 @@ export default function CalendarPage() {
     <div className="flex h-full overflow-hidden">
       <CalendarSidebar />
 
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
         {/* Custom toolbar — h-16 matches sidebar header */}
         <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
           <div className="flex items-center gap-1">