fix: misplaced draggable item

entrypoints/sidepanel/layouts/collections/CollectionListView.tsx

@@ -21,6 +21,7 @@ import { collisionDetector } from "../../utils/dnd/collisionDetector";
 import { useStyles_CollectionListView } from "./CollectionListView.styles";
 import SearchBar from "./SearchBar";
 import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage";
+import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
 
 export default function CollectionListView(): ReactElement
 {
@@ -110,6 +111,7 @@ export default function CollectionListView(): ReactElement
 						collisionDetection={ collisionDetector(!tilesView) }
 						onDragStart={ handleDragStart }
 						onDragEnd={ handleDragEnd }
+						modifiers={ [snapHandleToCursor] }
 					>
 						<SortableContext
 							items={ resultList.map((_, index) => index.toString()) }

entrypoints/sidepanel/utils/dnd/snapHandleToCursor.ts

@@ -0,0 +1,34 @@
+import { Modifier } from "@dnd-kit/core";
+import { Coordinates, getEventCoordinates } from "@dnd-kit/utilities";
+import { DndItem } from "../../hooks/useDndItem";
+
+export const snapHandleToCursor: Modifier = ({
+	activatorEvent,
+	draggingNodeRect,
+	transform,
+	active
+}) =>
+{
+	if (draggingNodeRect && activatorEvent)
+	{
+		const activeItem: DndItem | undefined = active?.data.current as DndItem;
+		const activatorCoordinates: Coordinates | null = getEventCoordinates(activatorEvent);
+
+		if (!activatorCoordinates)
+			return transform;
+
+		const initX: number = activatorCoordinates.x - draggingNodeRect.left;
+		const initY: number = activatorCoordinates.y - draggingNodeRect.top;
+
+		const offsetX: number = activeItem?.item.type === "group" ? 24 : draggingNodeRect.height / 2;
+		const offsetY: number = activeItem?.item.type === "group" ? 20 : draggingNodeRect.height / 2;
+
+		return {
+			...transform,
+			x: transform.x + initX - offsetX,
+			y: transform.y + initY - offsetY
+		};
+	}
+
+	return transform;
+};