From 4ddd003ef433e5770fe8981bdc6a91f74a34f7a2 Mon Sep 17 00:00:00 2001 From: Louis Mazin Date: Sun, 20 Sep 2026 02:51:24 +0200 Subject: [PATCH] test --- frontend/src/pages/WeeklySummaryPage.jsx | 60 ++++++++++++++++++------ 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx index 456eb10..c6083fd 100644 --- a/frontend/src/pages/WeeklySummaryPage.jsx +++ b/frontend/src/pages/WeeklySummaryPage.jsx @@ -30,7 +30,9 @@ const MIN_SCHEDULE_HEIGHT = 180; const MOBILE_TIME_COLUMN_WIDTH = 64; const MOBILE_USER_COLUMN_WIDTH = 40; const MOBILE_DEFAULT_CONTENT_WIDTH = 236; -const MOBILE_HOUR_HEIGHT = 80; + +const MOBILE_MIN_HOUR_HEIGHT = 56; +const MOBILE_MAX_HOUR_HEIGHT = 80; const USER_COLORS = [ '#c56a3d', @@ -429,10 +431,8 @@ const WeeklySummaryPage = ({ userId }) => { ); /* - * Sur mobile, la hauteur du conteneur est volontairement - * limitée afin que le contenu interne puisse défiler. - * - * On ne calcule donc pas availableScheduleHeight ici. + * Sur mobile, la hauteur du planning est calculée + * directement à partir de la hauteur disponible. */ if (window.innerWidth < 768) { return; @@ -1022,20 +1022,51 @@ const WeeklySummaryPage = ({ userId }) => { * Hauteur du planning * ------------------------------------------------------------ * - * Desktop : - * la hauteur calculée doit tenir dans la Card. - * * Mobile : - * chaque heure possède une hauteur fixe confortable. - * Le planning est donc volontairement plus haut que - * sa fenêtre visible et devient réellement scrollable. + * - on part de la hauteur réelle de la fenêtre visible ; + * - on retire la hauteur du header ; + * - on garde une hauteur minimale par heure ; + * - on limite la hauteur maximale afin d'éviter + * des cases inutilement grandes ; + * - si le planning dépasse la fenêtre, le scroll + * vertical reste disponible. + * + * Desktop : + * - la hauteur disponible dans la Card est conservée. */ + const mobileViewportHeight = + typeof window !== 'undefined' + ? window.innerHeight * 0.6 + : 500; + + const mobileAvailableScheduleHeight = + Math.max( + mobileViewportHeight - + SCHEDULE_HEADER_HEIGHT, + 0, + ); + + const calculatedMobileHourHeight = + hourCount > 0 + ? mobileAvailableScheduleHeight / + hourCount + : MOBILE_MIN_HOUR_HEIGHT; + + const mobileHourHeight = + Math.min( + MOBILE_MAX_HOUR_HEIGHT, + Math.max( + MOBILE_MIN_HOUR_HEIGHT, + calculatedMobileHourHeight, + ), + ); + const scheduleHeight = isMobile ? Math.max( MIN_SCHEDULE_HEIGHT, hourCount * - MOBILE_HOUR_HEIGHT, + mobileHourHeight, ) : Math.max( MIN_SCHEDULE_HEIGHT, @@ -1046,8 +1077,9 @@ const WeeklySummaryPage = ({ userId }) => { SCHEDULE_HEADER_HEIGHT + scheduleHeight; - const hourHeight = - hourCount > 0 + const hourHeight = isMobile + ? mobileHourHeight + : hourCount > 0 ? scheduleHeight / hourCount : 0;