test

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;