test

frontend/src/pages/WeeklySummaryPage.jsx

@@ -84,6 +84,16 @@ const WeeklySummaryPage = ({ userId }) => {
 
   const [isMobile, setIsMobile] = useState(false);
 
+  /*
+   * Largeur réelle disponible du planning mobile.
+   *
+   * Important :
+   * on ne se base pas directement sur window.innerWidth,
+   * car le CardContent possède ses propres marges/paddings.
+   */
+  const [mobileContainerWidth, setMobileContainerWidth] =
+    useState(0);
+
   const scheduleTableRef = useRef(null);
 
   /*
@@ -407,12 +417,12 @@ const WeeklySummaryPage = ({ userId }) => {
 
   /*
    * ------------------------------------------------------------
-   * Hauteur du planning
+   * Hauteur + largeur du planning
    * ------------------------------------------------------------
    */
 
   useLayoutEffect(() => {
-    const updateScheduleHeight = () => {
+    const updateScheduleDimensions = () => {
       const scheduleTable =
         scheduleTableRef.current;
 
@@ -422,8 +432,22 @@ const WeeklySummaryPage = ({ userId }) => {
       const footer =
         document.querySelector('footer');
 
+      if (!scheduleTable) {
+        return;
+      }
+
+      /*
+       * Largeur réelle visible du planning.
+       *
+       * On utilise clientWidth et non window.innerWidth
+       * afin de tenir compte du CardContent, des paddings,
+       * des bordures, etc.
+       */
+      setMobileContainerWidth(
+        scheduleTable.clientWidth,
+      );
+
       if (
-        !scheduleTable ||
         !main ||
         !footer
       ) {
@@ -459,17 +483,17 @@ const WeeklySummaryPage = ({ userId }) => {
       );
     };
 
-    updateScheduleHeight();
+    updateScheduleDimensions();
 
     window.addEventListener(
       'resize',
-      updateScheduleHeight,
+      updateScheduleDimensions,
     );
 
     return () => {
       window.removeEventListener(
         'resize',
-        updateScheduleHeight,
+        updateScheduleDimensions,
       );
     };
   }, [
@@ -848,7 +872,6 @@ const WeeklySummaryPage = ({ userId }) => {
 
   /*
    * ------------------------------------------------------------
-   * NOUVEAU :
    * Utilisateurs actifs sur une période
    *
    * Desktop -> toute la semaine
@@ -1048,17 +1071,47 @@ const WeeklySummaryPage = ({ userId }) => {
   /*
    * ------------------------------------------------------------
    * Largeur mobile
+   *
+   * La zone utilisateurs prend maintenant toute la largeur
+   * réellement disponible dans le conteneur.
+   *
+   * On garde cependant une largeur minimale correspondant :
+   * - à la largeur minimale des colonnes utilisateurs
+   * - à l'ancien minimum de contenu
+   *
+   * Si plusieurs utilisateurs dépassent cette largeur,
+   * le planning peut naturellement devenir plus large et
+   * déclencher le scroll horizontal.
    * ------------------------------------------------------------
    */
 
+  const measuredMobileWidth =
+    mobileContainerWidth > 0
+      ? mobileContainerWidth
+      : typeof window !== 'undefined'
+        ? window.innerWidth
+        : MOBILE_DEFAULT_CONTENT_WIDTH +
+          MOBILE_TIME_COLUMN_WIDTH;
+
+  const availableMobileUsersWidth =
+    Math.max(
+      measuredMobileWidth -
+        MOBILE_TIME_COLUMN_WIDTH,
+      0,
+    );
+
   const mobileUsersWidth =
     isAdmin && showAllUsers
       ? Math.max(
           mobileUserCount *
             MOBILE_USER_COLUMN_WIDTH,
           MOBILE_DEFAULT_CONTENT_WIDTH,
+          availableMobileUsersWidth,
         )
-      : MOBILE_DEFAULT_CONTENT_WIDTH;
+      : Math.max(
+          MOBILE_DEFAULT_CONTENT_WIDTH,
+          availableMobileUsersWidth,
+        );
 
   const mobilePlanningWidth =
     MOBILE_TIME_COLUMN_WIDTH +
@@ -1724,8 +1777,6 @@ const WeeklySummaryPage = ({ userId }) => {
                           1 utilisateur ayant pointé dans la semaine
                           = 1 colonne
 
-                          IMPORTANT :
-                          on ne fait plus getUserDayBounds().
                           Chaque pointage est affiché séparément.
                           ================================================== */}