diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx index b1ae5eb..456eb10 100644 --- a/frontend/src/pages/WeeklySummaryPage.jsx +++ b/frontend/src/pages/WeeklySummaryPage.jsx @@ -30,6 +30,7 @@ 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 USER_COLORS = [ '#c56a3d', @@ -423,18 +424,15 @@ const WeeklySummaryPage = ({ userId }) => { return; } - /* - * Largeur réellement disponible. - */ setMobileContainerWidth( scheduleTable.clientWidth, ); /* - * Sur mobile, on ne force pas la hauteur du planning - * à rentrer dans l'écran. + * Sur mobile, la hauteur du conteneur est volontairement + * limitée afin que le contenu interne puisse défiler. * - * Le planning doit pouvoir être scrollé verticalement. + * On ne calcule donc pas availableScheduleHeight ici. */ if (window.innerWidth < 768) { return; @@ -452,21 +450,9 @@ const WeeklySummaryPage = ({ userId }) => { return; } - /* - * Position réelle du planning. - */ const tableTop = scheduleTable.getBoundingClientRect().top; - /* - * Limite basse réelle disponible. - * - * Cela tient compte : - * - du CardContent - * - de son padding - * - du footer - * - de la hauteur de la fenêtre - */ const contentRect = cardContent.getBoundingClientRect(); @@ -481,10 +467,6 @@ const WeeklySummaryPage = ({ userId }) => { window.innerHeight, ); - /* - * Petite marge de sécurité pour éviter - * les scrollbars de quelques pixels. - */ const SAFETY_MARGIN = 4; const totalAvailableHeight = @@ -1036,17 +1018,24 @@ const WeeklySummaryPage = ({ userId }) => { endHour - startHour; /* + * ------------------------------------------------------------ + * Hauteur du planning + * ------------------------------------------------------------ + * * Desktop : - * hauteur calculée pour tenir exactement dans le Card. + * la hauteur calculée doit tenir dans la Card. * * Mobile : - * on conserve une hauteur confortable et le conteneur - * devient scrollable verticalement. + * 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. */ + const scheduleHeight = isMobile ? Math.max( MIN_SCHEDULE_HEIGHT, - availableScheduleHeight, + hourCount * + MOBILE_HOUR_HEIGHT, ) : Math.max( MIN_SCHEDULE_HEIGHT, @@ -1161,7 +1150,11 @@ const WeeklySummaryPage = ({ userId }) => { return ( { - + {/* Sélection utilisateur */} {isAdmin && (
@@ -1406,13 +1399,15 @@ const WeeklySummaryPage = ({ userId }) => { ref={scheduleTableRef} className={`relative rounded-lg border ${ isMobile - ? 'overflow-auto' + ? 'h-[60vh] max-h-[60vh] overflow-x-auto overflow-y-auto' : 'overflow-x-auto overflow-y-hidden' }`} style={{ - height: `${totalPlanningHeight}px`, + height: isMobile + ? '60vh' + : `${totalPlanningHeight}px`, maxHeight: isMobile - ? 'none' + ? '60vh' : `${totalPlanningHeight}px`, WebkitOverflowScrolling: 'touch',