test

frontend/src/pages/WeeklySummaryPage.jsx

@@ -23,12 +23,8 @@ const DEFAULT_START_HOUR = 8;
 const DEFAULT_END_HOUR = 18;
 
 const SCHEDULE_HEADER_HEIGHT = 58;
-const MIN_SCHEDULE_HEIGHT = 180;
-
-const MOBILE_MIN_HOUR_HEIGHT = 52;
 
 const MOBILE_TIME_COLUMN_WIDTH = 64;
-const MOBILE_USER_COLUMN_WIDTH = 40;
 const MOBILE_DEFAULT_CONTENT_WIDTH = 236;
 
 const expandOvernightAttendances = (entries) => {
@@ -443,17 +439,9 @@ const WeeklySummaryPage = ({ userId }) => {
       }
 
       setMobileContainerWidth(
-        scheduleTable.clientWidth,
+        Math.max(0, scheduleTable.clientWidth - 2),
       );
 
-      if (window.innerWidth < 768) {
-        setMobileContainerHeight(
-          scheduleTable.clientHeight,
-        );
-
-        return;
-      }
-
       const cardContent =
         scheduleTable.closest(
           '[data-slot="card-content"]',
@@ -476,12 +464,11 @@ const WeeklySummaryPage = ({ userId }) => {
         ? footer.getBoundingClientRect().top
         : window.innerHeight;
 
-      const availableBottom =
+      const availableBottom = Math.min(
-        Math.min(
+        footerTop,
-          contentRect.bottom,
+        window.innerHeight,
-          footerTop,
+        contentRect.bottom,
-          window.innerHeight,
+      );
-        );
 
       const SAFETY_MARGIN = 4;
 
@@ -490,23 +477,16 @@ const WeeklySummaryPage = ({ userId }) => {
         tableTop -
         SAFETY_MARGIN;
 
-      const nextTotalHeight =
+      const nextScheduleHeight = Math.max(
-        Math.max(
+        0,
-          SCHEDULE_HEADER_HEIGHT +
+        totalAvailableHeight - SCHEDULE_HEADER_HEIGHT,
-            MIN_SCHEDULE_HEIGHT,
-          totalAvailableHeight,
-        );
-
-      const nextScheduleHeight =
-        Math.max(
-          MIN_SCHEDULE_HEIGHT,
-          nextTotalHeight -
-            SCHEDULE_HEADER_HEIGHT,
-        );
-
-      setAvailableScheduleHeight(
-        nextScheduleHeight,
       );
+
+      if (window.innerWidth < 768) {
+        setMobileContainerHeight(Math.max(0, totalAvailableHeight));
+      } else {
+        setAvailableScheduleHeight(nextScheduleHeight);
+      }
     };
 
     updateScheduleDimensions();
@@ -1066,27 +1046,9 @@ const WeeklySummaryPage = ({ userId }) => {
         SCHEDULE_HEADER_HEIGHT,
     );
 
-  const mobileNaturalScheduleHeight =
-    hourCount *
-    MOBILE_MIN_HOUR_HEIGHT;
-
-  const mobileScheduleHeight =
-    mobileAvailableBodyHeight > 0
-      ? Math.max(
-          mobileAvailableBodyHeight,
-          mobileNaturalScheduleHeight,
-        )
-      : Math.max(
-          MIN_SCHEDULE_HEIGHT,
-          mobileNaturalScheduleHeight,
-        );
-
   const scheduleHeight = isMobile
-    ? mobileScheduleHeight
+    ? mobileAvailableBodyHeight
-    : Math.max(
+    : availableScheduleHeight;
-        MIN_SCHEDULE_HEIGHT,
-        availableScheduleHeight,
-      );
 
   const totalPlanningHeight =
     SCHEDULE_HEADER_HEIGHT +
@@ -1148,7 +1110,7 @@ const WeeklySummaryPage = ({ userId }) => {
     mobileContainerWidth > 0
       ? mobileContainerWidth
       : typeof window !== 'undefined'
-        ? window.innerWidth
+        ? window.innerWidth - 48
         : MOBILE_DEFAULT_CONTENT_WIDTH +
           MOBILE_TIME_COLUMN_WIDTH;
 
@@ -1160,17 +1122,7 @@ const WeeklySummaryPage = ({ userId }) => {
     );
 
   const mobileUsersWidth =
-    isAdmin && showAllUsers
+    availableMobileUsersWidth;
-      ? Math.max(
-          mobileUserCount *
-            MOBILE_USER_COLUMN_WIDTH,
-          MOBILE_DEFAULT_CONTENT_WIDTH,
-          availableMobileUsersWidth,
-        )
-      : Math.max(
-          MOBILE_DEFAULT_CONTENT_WIDTH,
-          availableMobileUsersWidth,
-        );
 
   const mobilePlanningWidth =
     MOBILE_TIME_COLUMN_WIDTH +
@@ -1199,7 +1151,7 @@ const WeeklySummaryPage = ({ userId }) => {
       icon={CalendarDays}
       className={
         isMobile
-          ? 'overflow-visible'
+          ? 'overflow-hidden'
           : 'overflow-hidden'
       }
       title={
@@ -1408,22 +1360,9 @@ const WeeklySummaryPage = ({ userId }) => {
 
         <div
           ref={scheduleTableRef}
-          className={`relative min-h-0 rounded-lg border ${
+          className="relative min-h-0 w-full shrink-0 overflow-hidden rounded-lg border"
-            isMobile
-              ? 'flex-1 overflow-auto'
-              : 'overflow-x-auto overflow-y-hidden'
-          }`}
           style={{
-            ...(isMobile
+            height: `${totalPlanningHeight}px`,
-              ? {}
-              : {
-                  height: `${totalPlanningHeight}px`,
-                  maxHeight: `${totalPlanningHeight}px`,
-                }),
-            WebkitOverflowScrolling:
-              'touch',
-            touchAction:
-              'pan-x pan-y',
           }}
         >
           {/* ====================================================
@@ -1526,7 +1465,7 @@ const WeeklySummaryPage = ({ userId }) => {
                     <div
                       className="absolute inset-0 grid"
                       style={{
-                        gridTemplateColumns: `repeat(${mobileUserCount}, minmax(${MOBILE_USER_COLUMN_WIDTH}px, 1fr))`,
+                        gridTemplateColumns: `repeat(${mobileUserCount}, minmax(0, 1fr))`,
                       }}
                     >
                       {mobileActiveUsers.map(
@@ -1732,10 +1671,10 @@ const WeeklySummaryPage = ({ userId }) => {
                ==================================================== */
 
             <div
-              className="grid min-w-[900px]"
+              className="grid w-full"
               style={{
                 gridTemplateColumns:
-                  '64px repeat(7, minmax(120px, 1fr))',
+                  '64px repeat(7, minmax(0, 1fr))',
                 gridTemplateRows:
                   `${SCHEDULE_HEADER_HEIGHT}px ${scheduleHeight}px`,
                 height: `${totalPlanningHeight}px`,