[ Fix ] [ Issue - 5701 ] Mouse down and drag is selecting records, while file import modal is open (#5716)

## Changes Made

- Prevent mouse event propagation outside modal 
- Prevent text selection inside the modal during drag event

## Related Issue

https://github.com/twentyhq/twenty/issues/5701

## Evidence

### Before


https://github.com/twentyhq/twenty/assets/87609792/c15c2a1d-5e3b-4fc5-a98a-638615e8d7b9

### After

Actual drag operation is done, but not visible in the video



https://github.com/twentyhq/twenty/assets/87609792/f2e68e67-1eb1-4a15-83c8-8cb4313bcaa1

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>

packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx

@@ -82,6 +82,7 @@ const StyledBackDrop = styled(motion.div)`
   top: 0;
   width: 100%;
   z-index: 9999;
+  user-select: none;
 `;
 
 /**
@@ -141,8 +142,12 @@ export const ModalLayout = ({
   modalRef,
   className,
 }: ModalLayoutProps) => {
+  const stopEventPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
-    <StyledBackDrop>
+    <StyledBackDrop onMouseDown={stopEventPropagation}>
       <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment