diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx index 664b651..58a05d5 100644 --- a/frontend/src/pages/WeeklySummaryPage.jsx +++ b/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. ================================================== */}