test

frontend/src/pages/CalendarPage.jsx

@@ -1,5 +1,6 @@
 import React, {
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -112,6 +113,8 @@ const CalendarPage = () => {
   );
   const [isMobile, setIsMobile] =
     useState(false);
+  const [calendarViewportHeight, setCalendarViewportHeight] =
+    useState(null);
   const [events, setEvents] =
     useState([]);
   const [loadingEvents, setLoadingEvents] =
@@ -159,6 +162,7 @@ const CalendarPage = () => {
       end_time: '',
       color: DEFAULT_EVENT_COLOR,
     });
+  const calendarViewportRef = useRef(null);
   /* SÉLECTION D'UNE PÉRIODE */
   const [selectionStart, setSelectionStart] = useState(null);
   const [selectionEnd, setSelectionEnd] = useState(null);
@@ -430,6 +434,22 @@ const CalendarPage = () => {
   useEffect(() => {
     if (isMobile) clearSelection();
   }, [isMobile]);
+  useLayoutEffect(() => {
+    if (loadingEvents || !calendarViewportRef.current) return;
+
+    const viewport = calendarViewportRef.current;
+    const updateHeight = () => {
+      const height = viewport.getBoundingClientRect().height;
+      setCalendarViewportHeight((previous) =>
+        previous === height ? previous : height,
+      );
+    };
+
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, [loadingEvents]);
   /*
    * ============================================================
    * ANNÉE
@@ -1386,6 +1406,7 @@ const CalendarPage = () => {
             )}
             <Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
               <div
+                ref={calendarViewportRef}
                 className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
                 style={{
                   WebkitOverflowScrolling:
@@ -1395,8 +1416,11 @@ const CalendarPage = () => {
                 }}
               >
                 <div
-                  className="grid h-full w-full min-w-0 border-l border-t border-border"
+                  className="grid w-full min-w-0 border-l border-t border-border"
                   style={{
+                    height: calendarViewportHeight === null
+                      ? '100%'
+                      : `${Math.max(calendarViewportHeight, HEADER_HEIGHT + rowCount * MIN_ROW_HEIGHT)}px`,
                     minHeight: `${HEADER_HEIGHT + rowCount * MIN_ROW_HEIGHT}px`,
                     minWidth: isMobile
                       ? '100%'