adjustScaleModifier does not apply to placeholder in a sortable list.

[bogris]

I am implementing DND in a ReactFlow node. React flow uses scale to ... scale the items in the viewport.
Basically DND is in a div that is scaled.

if i don't do anything special, the draggable item drifts under the cursor if the zoom level is not 1.

In order to have proper calculations, I created a adjustScaleModifier based on the zoom level of the react flow viewport and applied it to the Context:

  const scaleFactor = 1 / zoom; // Inverse of your scaling factor

  const adjustScaleModifier: Modifier = ({ transform }) => {
    return {
      ...transform,
      x: transform.x * scaleFactor,
      y: transform.y * scaleFactor,
    };
  };
...
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragEnd={handleDragEnd}
        modifiers={[
          adjustScaleModifier,
          restrictToVerticalAxis,
          restrictToParentElement,
        ]}
      >

This solved the drifting problem, but i have another one that is not solved:

Looks like the placeholder of the item i am moving is not scaled accordingly and in my case, on a vertical list, the empy sace placeholder is zoomLevel times bigger then it should be.

Is there a way to adjust the height of the placeholder in a Sortable list?
also, in my mind, it should be subjected to the modifier also.

attached a short video before adding the modifier that highlights the placeholder issue. zoom was about 1.5.

https://www.loom.com/share/231a3a67d61a4563b78ac78122a8ac74?sid=2b8c4625-563b-476a-bbe5-7f74a0bd501b

  Thanks,