test

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
+       * Sur mobile, la hauteur du conteneur est volontairement
-       * à rentrer dans l'écran.
+       * 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
+   * chaque heure possède une hauteur fixe confortable.
-   * devient scrollable verticalement.
+   * 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 (
     <Card
-      className={`flex h-full min-h-0 w-full overflow-hidden weekly-schedule page-layout${
+      className={`flex h-full min-h-0 w-full weekly-schedule page-layout ${
+        isMobile
+          ? 'overflow-visible'
+          : 'overflow-hidden'
+      }${
         isAdmin
           ? ' multi-user-schedule'
           : ''
@@ -1288,7 +1281,7 @@ const WeeklySummaryPage = ({ userId }) => {
         </div>
       </CardHeader>
 
-      <CardContent className="min-h-0 flex-1">
+      <CardContent className="min-h-0 flex-1 overflow-visible">
         {/* Sélection utilisateur */}
         {isAdmin && (
           <div className="flex flex-col gap-3 pb-4 md:flex-row md:items-center">
@@ -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',