diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx index c6083fd..67728a9 100644 --- a/frontend/src/pages/WeeklySummaryPage.jsx +++ b/frontend/src/pages/WeeklySummaryPage.jsx @@ -31,9 +31,6 @@ const MOBILE_TIME_COLUMN_WIDTH = 64; const MOBILE_USER_COLUMN_WIDTH = 40; const MOBILE_DEFAULT_CONTENT_WIDTH = 236; -const MOBILE_MIN_HOUR_HEIGHT = 56; -const MOBILE_MAX_HOUR_HEIGHT = 80; - const USER_COLORS = [ '#c56a3d', '#3d7c8c', @@ -413,7 +410,7 @@ const WeeklySummaryPage = ({ userId }) => { /* * ------------------------------------------------------------ - * Hauteur + largeur du planning + * Dimensions du planning * ------------------------------------------------------------ */ @@ -431,8 +428,9 @@ const WeeklySummaryPage = ({ userId }) => { ); /* - * Sur mobile, la hauteur du planning est calculée - * directement à partir de la hauteur disponible. + * Le mobile utilise directement la hauteur du conteneur + * définie par 60vh. Il ne faut surtout pas recalculer + * une seconde hauteur à partir de window.innerHeight. */ if (window.innerWidth < 768) { return; @@ -1022,52 +1020,36 @@ const WeeklySummaryPage = ({ userId }) => { * Hauteur du planning * ------------------------------------------------------------ * - * Mobile : - * - 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. + * MOBILE * - * Desktop : - * - la hauteur disponible dans la Card est conservée. + * Le conteneur visible fait exactement 60vh. + * + * Le header occupe 58px. + * + * Le corps du planning prend donc : + * + * 60vh - 58px + * + * Puis cette hauteur est divisée exactement par le nombre + * d'heures. + * + * Il n'y a aucune hauteur min/max par heure. */ - const mobileViewportHeight = + const mobilePlanningViewportHeight = typeof window !== 'undefined' ? window.innerHeight * 0.6 - : 500; + : 0; - const mobileAvailableScheduleHeight = + const mobileScheduleHeight = 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, - ), + mobilePlanningViewportHeight - + SCHEDULE_HEADER_HEIGHT, ); const scheduleHeight = isMobile - ? Math.max( - MIN_SCHEDULE_HEIGHT, - hourCount * - mobileHourHeight, - ) + ? mobileScheduleHeight : Math.max( MIN_SCHEDULE_HEIGHT, availableScheduleHeight, @@ -1077,9 +1059,8 @@ const WeeklySummaryPage = ({ userId }) => { SCHEDULE_HEADER_HEIGHT + scheduleHeight; - const hourHeight = isMobile - ? mobileHourHeight - : hourCount > 0 + const hourHeight = + hourCount > 0 ? scheduleHeight / hourCount : 0; @@ -1431,7 +1412,7 @@ const WeeklySummaryPage = ({ userId }) => { ref={scheduleTableRef} className={`relative rounded-lg border ${ isMobile - ? 'h-[60vh] max-h-[60vh] overflow-x-auto overflow-y-auto' + ? 'h-[60vh] max-h-[60vh] overflow-x-auto overflow-y-hidden' : 'overflow-x-auto overflow-y-hidden' }`} style={{