DropZones That Overflow in the X Axis Provide Buggy Visual Feedback When Scrolling

[FedericoBonel]

Description

When a DropZone overflows in the horizontal (X) axis, the visual feedback for drag-and-drop becomes buggy when scrolling. The preview of each item’s drag zone remains fixed in its original position instead of updating with the scroll.

Steps to Reproduce

1. Configure a DropZone and an item as follows:

   Row: {
     render: () => {
       return (
         <DropZone zone="row" style={{ display: "flex", overflow: "auto" }} />
       );
     },
   },
   Item: {
     inline: true,
     render: ({ puck }) => {
       return (
         <div
           style={{
             padding: "16px",
             width: 500,
             height: 200,
             border: "1px solid #ccc",
             flexShrink: 0,
           }}
           ref={puck.dragRef}
         >
           Some item
         </div>
       );
     },
   },

2. Drag and drop a Row component into the editor.
3. Add multiple Item components inside until they overflow horizontally.
4. Scroll within the overflown row (Shift + Scroll Down).

Expected Behavior

The drag zone preview should update its position correctly when scrolling, staying aligned with the items.

Actual Behavior

The preview of each item’s drag zone is misplaced—it remains fixed in the position the item was in before scrolling.

Video

Vite.+.React.mp4