fix: Disable pointer events when dragging

client/src/components/Board/Board.jsx

@@ -11,6 +11,7 @@ import ListAdd from './ListAdd';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
 import styles from './Board.module.scss';
+import globalStyles from '../../styles.module.scss';
 
 const parseDndId = (dndId) => dndId.split(':')[1];
 
@@ -31,11 +32,14 @@ const Board = React.memo(
     }, []);
 
     const handleDragStart = useCallback(() => {
+      document.body.classList.add(globalStyles.dragging);
       closePopup();
     }, []);
 
     const handleDragEnd = useCallback(
       ({ draggableId, type, source, destination }) => {
+        document.body.classList.remove(globalStyles.dragging);
+
         if (
           !destination ||
           (source.droppableId === destination.droppableId && source.index === destination.index)

client/src/components/Boards/Boards.jsx

@@ -13,6 +13,7 @@ import AddStep from './AddStep';
 import EditStep from './EditStep';
 
 import styles from './Boards.module.scss';
+import globalStyles from '../../styles.module.scss';
 
 const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
   const tabsWrapper = useRef(null);
@@ -24,11 +25,14 @@ const Boards = React.memo(({ items, currentId, canEdit, onCreate, onUpdate, onMo
   }, []);
 
   const handleDragStart = useCallback(() => {
+    document.body.classList.add(globalStyles.dragging);
     closePopup();
   }, []);
 
   const handleDragEnd = useCallback(
     ({ draggableId, source, destination }) => {
+      document.body.classList.remove(globalStyles.dragging);
+
       if (!destination || source.index === destination.index) {
         return;
       }

client/src/components/CardModal/Tasks/Tasks.jsx

@@ -10,16 +10,20 @@ import Item from './Item';
 import Add from './Add';
 
 import styles from './Tasks.module.scss';
+import globalStyles from '../../../styles.module.scss';
 
 const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
   const [t] = useTranslation();
 
   const handleDragStart = useCallback(() => {
+    document.body.classList.add(globalStyles.dragging);
     closePopup();
   }, []);
 
   const handleDragEnd = useCallback(
     ({ draggableId, source, destination }) => {
+      document.body.classList.remove(globalStyles.dragging);
+
       if (!destination || source.index === destination.index) {
         return;
       }

client/src/components/LabelsStep/LabelsStep.jsx

@@ -13,6 +13,7 @@ import EditStep from './EditStep';
 import Item from './Item';
 
 import styles from './LabelsStep.module.scss';
+import globalStyles from '../../styles.module.scss';
 
 const StepTypes = {
   ADD: 'ADD',
@@ -77,8 +78,14 @@ const LabelsStep = React.memo(
       [onDeselect],
     );
 
+    const handleDragStart = useCallback(() => {
+      document.body.classList.add(globalStyles.dragging);
+    }, []);
+
     const handleDragEnd = useCallback(
       ({ draggableId, source, destination }) => {
+        document.body.classList.remove(globalStyles.dragging);
+
         if (!destination || source.index === destination.index) {
           return;
         }
@@ -159,7 +166,7 @@ const LabelsStep = React.memo(
             onChange={handleSearchChange}
           />
           {filteredItems.length > 0 && (
-            <DragDropContext onDragEnd={handleDragEnd}>
+            <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
               <Droppable droppableId="labels" type={DroppableTypes.LABEL}>
                 {({ innerRef, droppableProps, placeholder }) => (
                   <div

client/src/styles.module.scss

@@ -142,6 +142,10 @@
 }
 
 :global(#app) {
+  &.dragging>* {
+    pointer-events: none;
+  }
+
   /* Backgrounds */
 
   .backgroundBerryRed {