From 614f8e5df3a7c1b0bf4d9b8b60c0afb6f6496da1 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 19 Jan 2026 23:53:33 +0100
Subject: [PATCH] correction finition widget done

---
 components/calendar/calendar-client.tsx | 26 ++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 2db7d3c..fd64f7c 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -828,6 +828,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   
   // Refs et state pour la hauteur du calendrier
   const calendarContainerRef = useRef<HTMLDivElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
   const [calendarHeight, setCalendarHeight] = useState<number>(600); // hauteur par défaut
 
   // Update useEffect to initialize visible calendars and fetch events
@@ -851,9 +853,19 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   // Calculer la hauteur disponible pour FullCalendar
   useEffect(() => {
     const calculateHeight = () => {
-      if (calendarContainerRef.current) {
+      // Calculer depuis la Card parent qui a une hauteur définie
+      if (cardRef.current && headerRef.current) {
+        const cardHeight = cardRef.current.clientHeight;
+        const headerHeight = headerRef.current.offsetHeight;
+        const padding = 16; // p-4 = 1rem = 16px (top + bottom)
+        const availableHeight = cardHeight - headerHeight - padding;
+        
+        if (availableHeight > 0) {
+          setCalendarHeight(availableHeight);
+        }
+      } else if (calendarContainerRef.current) {
+        // Fallback: utiliser le conteneur si les refs ne sont pas disponibles
         const containerHeight = calendarContainerRef.current.clientHeight;
-        // Utiliser la hauteur complète du conteneur si disponible, sinon utiliser une valeur par défaut
         if (containerHeight > 0) {
           setCalendarHeight(containerHeight);
         }
@@ -870,13 +882,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     // Recalculer lors du redimensionnement de la fenêtre
     window.addEventListener('resize', calculateHeight);
     
-    // Observer les changements de taille du conteneur
+    // Observer les changements de taille de la Card
     const resizeObserver = new ResizeObserver(() => {
       calculateHeight();
     });
     
-    if (calendarContainerRef.current) {
-      resizeObserver.observe(calendarContainerRef.current);
+    if (cardRef.current) {
+      resizeObserver.observe(cardRef.current);
     }
 
     return () => {
@@ -1621,8 +1633,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
       {/* Middle column for calendar view */}
       <div className="flex-1 flex flex-col">
-        <Card className="p-4 flex-1 flex flex-col">
-          <div className="flex items-center justify-between mb-4">
+        <Card ref={cardRef} className="p-4 flex-1 flex flex-col">
+          <div ref={headerRef} className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-4">
               {/* Display selected calendar name */}
               {(() => {