fix(ui): fix longstanding drag-and-drop duplication issue (#502)

* fix(ui): fixed color switching on list reordering

* chore: remove lock file

* chore: add back lock file

* feat(ui): fix color duplication issue and prevent scrolling beyond parent

* feat(ui): add to storybook

* fix(ui): remove white background while dragging

* chore: remove dnd pangea from package.json

* chore: rebuild lock file

* chore: remove nested li element issue

* fix(ui): allow grabbing cursor while dragging

* fix(ui): address chromatic errors

* fix(ui): address chromatic errors

* fix(ui): address linting issues and pass tests

* fix(ui): create hook for modifying the cursor globally

* chore: add check for storybook env

* chore: add back unused import to AddAllButton

* fix: make cursor grabbing hook more explicit

* chore: move sortable list item into sortable list file

* fix: remove isStorybook prop from ScheduleListItem

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/common/SortableItemOverlay.tsx

@@ -0,0 +1,21 @@
+import type { DropAnimation } from '@dnd-kit/core';
+import { defaultDropAnimationSideEffects, DragOverlay } from '@dnd-kit/core';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+const dropAnimationConfig: DropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                visibility: 'hidden',
+            },
+        },
+    }),
+};
+
+/**
+ * @returns Renders a visibly hidden sortable item in the sortable list while it is being dragged
+ */
+export function SortableItemOverlay({ children }: PropsWithChildren) {
+    return <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>;
+}