[WEB-1204] fix: Kanban and calendar drag and drop in mobile (#4408)

* chore: don't show context menu on mobile devices

* fix: drag and drop in mobile

* chore: default show more options in mobile

* fix: dnd in calendar layout

packages/ui/src/control-link/control-link.tsx

@@ -38,3 +38,5 @@ export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((pr
     </a>
   );
 });
+
+ControlLink.displayName = "ControlLink";

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -6,6 +6,7 @@ import { ContextMenuItem } from "./item";
 import { cn } from "../../../helpers";
 // hooks
 import useOutsideClickDetector from "../../hooks/use-outside-click-detector";
+import { usePlatformOS } from "../../hooks/use-platform-os";
 
 export type TContextMenuItem = {
   key: string;
@@ -38,6 +39,7 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
   const contextMenuRef = useRef<HTMLDivElement>(null);
   // derived values
   const renderedItems = items.filter((item) => item.shouldRender !== false);
+  const { isMobile } = usePlatformOS();
 
   const handleClose = () => {
     setIsOpen(false);
@@ -51,6 +53,8 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
     if (!parentElement || !contextMenu) return;
 
     const handleContextMenu = (e: MouseEvent) => {
+      if (isMobile) return;
+
       e.preventDefault();
       e.stopPropagation();
 
@@ -83,7 +87,7 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
       parentElement.removeEventListener("contextmenu", handleContextMenu);
       window.removeEventListener("keydown", hideContextMenu);
     };
-  }, [contextMenuRef, isOpen, parentRef, setIsOpen, setPosition]);
+  }, [contextMenuRef, isMobile, isOpen, parentRef, setIsOpen, setPosition]);
 
   // handle keyboard navigation
   useEffect(() => {

packages/ui/src/hooks/use-platform-os.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export const usePlatformOS = () => {
+  // states
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const userAgent = window.navigator.userAgent;
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
+    if (isMobile) setIsMobile(isMobile);
+  }, []);
+
+  return { isMobile };
+};