From f4e70e6e99da0e457f1c098454e7a2e4c706b125 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 16 Sep 2026 18:49:01 +0000
Subject: [PATCH] fix(rundown): match drag overlay rect to the dragged element

dnd-kit measures the drag overlay's first child and uses that rect for
collision detection. A preview smaller than the row it represents shifts
the collision centre and, with closestCenter, the resulting drop position.
The preview now fills the overlay wrapper, which dnd-kit sizes from the
dragged element, keeping drop targeting identical to before the overlay.

Also drops the redundant drag cancel wrapper.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TEnUVARPnSqXijiz8KiLiE
---
 .../src/features/rundown/hooks/useRundownDnd.ts    | 14 +++++---------
 .../RundownDragPreview.module.scss                 | 11 ++++++++++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/features/rundown/hooks/useRundownDnd.ts b/apps/client/src/features/rundown/hooks/useRundownDnd.ts
index 9f504808f..21b369e90 100644
--- a/apps/client/src/features/rundown/hooks/useRundownDnd.ts
+++ b/apps/client/src/features/rundown/hooks/useRundownDnd.ts
@@ -44,6 +44,9 @@ export function useRundownDnd({
   const activeDataRef = useRef<Data | null>(null);
   const [activeId, setActiveId] = useState<EntryId | null>(null);
 
+  /**
+   * Discards any reference to the dragged element, also used as the drag cancel handler
+   */
   const clearActive = useCallback(() => {
     isDraggingRef.current = false;
     activeDataRef.current = null;
@@ -150,13 +153,6 @@ export function useRundownDnd({
     [handleCollapseGroup],
   );
 
-  /**
-   * On drag cancel we discard any reference to the dragged element
-   */
-  const handleOnDragCancel = useCallback(() => {
-    clearActive();
-  }, [clearActive]);
-
   /**
    * When we drag over a group, we expand it if it is collapsed
    */
@@ -183,9 +179,9 @@ export function useRundownDnd({
       activeId,
       handleOnDragEnd,
       handleOnDragStart,
-      handleOnDragCancel,
+      handleOnDragCancel: clearActive,
       expandOverGroup,
     }),
-    [sensors, activeId, handleOnDragEnd, handleOnDragStart, handleOnDragCancel, expandOverGroup],
+    [sensors, activeId, handleOnDragEnd, handleOnDragStart, clearActive, expandOverGroup],
   );
 }
diff --git a/apps/client/src/features/rundown/rundown-drag-preview/RundownDragPreview.module.scss b/apps/client/src/features/rundown/rundown-drag-preview/RundownDragPreview.module.scss
index d53c22c8f..4320d1c35 100644
--- a/apps/client/src/features/rundown/rundown-drag-preview/RundownDragPreview.module.scss
+++ b/apps/client/src/features/rundown/rundown-drag-preview/RundownDragPreview.module.scss
@@ -1,12 +1,21 @@
 @use '../blockMixins' as *;
 
+/**
+ * The overlay wrapper is sized by dnd-kit to match the element being dragged
+ * We fill it entirely so that the measured rect used for collision detection
+ * matches the element the user grabbed
+ */
 .preview {
   @include block-styling;
 
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+
   display: grid;
   grid-template-columns: $block-binder-width 1fr;
   align-items: center;
-  height: $secondary-block-height;
   background-color: $block-bg;
   box-shadow: $block-box-shadow;
   cursor: grabbing;