fix(web): infinite week changes when dragging someday event to edge of calendar (#902)

Author: that-one-arab

packages/web/src/views/Calendar/components/Grid/Grid.tsx

@@ -2,6 +2,7 @@ import { Dayjs } from "dayjs";
 import React, { FC } from "react";
 import { AllDayRow } from "@web/views/Calendar/components/Grid/AllDayRow";
 import { MainGrid } from "@web/views/Calendar/components/Grid/MainGrid";
+import { EdgeNavigationIndicators } from "@web/views/Calendar/components/Grid/MainGrid/EdgeNavigationIndicators";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { useDragEdgeNavigation } from "@web/views/Calendar/hooks/grid/useDragEdgeNavigation";
 import { Refs_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
@@ -31,7 +32,7 @@ export const Grid: FC<Props> = ({
   const dragEdgeState = useDragEdgeNavigation(mainGridRef, weekProps);
 
   return (
-    <>
+    <div style={{ height: "100%", width: "100%", position: "relative" }}>
       <AllDayRow
         allDayRef={allDayRef}
         dateCalcs={dateCalcs}
@@ -49,6 +50,7 @@ export const Grid: FC<Props> = ({
         weekProps={weekProps}
         dragEdgeState={dragEdgeState}
       />
-    </>
+      <EdgeNavigationIndicators dragEdgeState={dragEdgeState} />
+    </div>
   );
 };

packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx

@@ -16,7 +16,6 @@ import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { DRAFT_DURATION_MIN } from "@web/views/Calendar/layout.constants";
 import { MainGridColumns } from "../Columns/MainGridColumns";
-import { EdgeNavigationIndicators } from "./EdgeNavigationIndicators";
 import { MainGridEvents } from "./MainGridEvents";
 import {
   StyledGridRow,
@@ -99,8 +98,6 @@ export const MainGrid: FC<Props> = ({
       </StyledGridWithTimeLabels>
 
       <MainGridEvents measurements={measurements} weekProps={weekProps} />
-
-      <EdgeNavigationIndicators dragEdgeState={dragEdgeState} />
     </StyledMainGrid>
   );
 };

packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts

@@ -30,6 +30,7 @@ export const StyledGridWithTimeLabels = styled.div`
 export const StyledMainGrid = styled.div`
   flex: 1;
   margin-bottom: ${GRID_PADDING_BOTTOM}px;
+  height: 100%;
   width: 100%;
   position: relative;
   overflow-y: auto;

packages/web/src/views/Calendar/hooks/grid/useDragEdgeNavigation.ts

@@ -1,6 +1,4 @@
 import { MutableRefObject, useEffect, useRef, useState } from "react";
-import { ID_GRID_ALLDAY_ROW } from "@web/common/constants/web.constants";
-import { getElemById } from "@web/common/utils/grid.util";
 import { selectIsDNDing } from "@web/ducks/events/selectors/draft.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
@@ -78,18 +76,27 @@ export const useDragEdgeNavigation = (
       return;
     }
 
-    // Use appropriate container based on event type
-    const isAllDay = currentDraft.isAllDay;
-    const container = isAllDay
-      ? getElemById(ID_GRID_ALLDAY_ROW)
-      : mainGridRef.current;
+    // Check if mouse is over the main calendar grid
+    if (!mainGridRef.current) {
+      return;
+    }
+
+    const calendarBounds = mainGridRef.current.getBoundingClientRect();
+    const { x, y } = mousePosition;
+
+    const isMouseOverCalendar =
+      x >= calendarBounds.left &&
+      x <= calendarBounds.right &&
+      y >= calendarBounds.top &&
+      y <= calendarBounds.bottom;
 
-    if (!container) {
+    // Only proceed with edge detection if mouse is over calendar
+    if (!isMouseOverCalendar) {
       return;
     }
 
-    const { left, right } = container.getBoundingClientRect();
-    const { x } = mousePosition;
+    // Use main calendar bounds for edge detection
+    const { left, right } = calendarBounds;
 
     let currentEdge: "left" | "right" | null = null;
 

packages/web/src/views/Calendar/hooks/grid/useDragEventSmartScroll.ts

@@ -35,7 +35,11 @@ export const useDragEventSmartScroll = (
       if (!container) return;
       if (state.draft?.isAllDay !== false) return;
 
-      const { top, bottom } = container.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const { top, bottom } = {
+        top: containerRect.top,
+        bottom: containerRect.bottom - 100,
+      };
       const { y } = mousePosition;
 
       let scrollAmount = 0;