fix: replaced isMobile with mantine hook

package.json

@@ -30,7 +30,6 @@
     "libphonenumber-js": "^1.12.10",
     "next": "15.3.3",
     "react": "19.1.0",
-    "react-device-detect": "^2.2.3",
     "react-dom": "19.1.0",
     "react-imask": "^7.6.1",
     "react-redux": "^9.2.0",

src/app/deals/components/Board/BoardMenu.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
 import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
-import { isMobile } from "react-device-detect";
 import { Box, Group, Menu, Text } from "@mantine/core";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import useIsMobile from "@/hooks/useIsMobile";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
@@ -12,8 +12,14 @@ type Props = {
     menuIconSize?: number;
 };
 
-const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true, menuIconSize = 16 }) => {
+const BoardMenu: FC<Props> = ({
+    board,
+    startEditing,
+    isHovered = true,
+    menuIconSize = 16,
+}) => {
     const { selectedBoard, onDeleteBoard } = useBoardsContext();
+    const isMobile = useIsMobile();
 
     return (
         <Menu>

src/app/deals/components/Boards/Boards.tsx

@@ -6,11 +6,12 @@ import Board from "@/app/deals/components/Board/Board";
 import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SortableDnd from "@/components/dnd/SortableDnd";
+import useIsMobile from "@/hooks/useIsMobile";
 import { BoardSchema } from "@/lib/client";
-import { isMobile } from "react-device-detect";
 
 const Boards = () => {
     const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();
+    const isMobile = useIsMobile();
 
     const renderBoard = (board: BoardSchema) => {
         return <Board board={board} />;

src/app/deals/components/Funnel/Funnel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
-import { isMobile } from "react-device-detect";
 import { Group, ScrollArea } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
@@ -10,11 +9,13 @@ import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/Stat
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd";
 import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd";
+import useIsMobile from "@/hooks/useIsMobile";
 import { DealSchema, StatusSchema } from "@/lib/client";
 import { sortByLexorank } from "@/utils/lexorank";
 
 const Funnel: FC = () => {
     const { deals } = useDealsContext();
+    const isMobile = useIsMobile();
 
     const {
         sortedStatuses,

src/app/deals/components/Header/Header.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
-import { isMobile } from "react-device-detect";
 import { Box, Group, Text } from "@mantine/core";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
 import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
+import useIsMobile from "@/hooks/useIsMobile";
 
 const Header = () => {
     const { projects, setSelectedProject, selectedProject } =
         useProjectsContext();
     const { setIsEditorDrawerOpened } = useBoardsContext();
+    const isMobile = useIsMobile();
 
     const getDesktopHeader = () => {
         return (

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,7 +12,6 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { isMobile } from "react-device-detect";
 import Slider from "react-slick";
 import { Group } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton";
@@ -20,6 +19,7 @@ import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
 import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
 import { BaseDraggable } from "@/components/dnd/types/types";
+import useIsMobile from "@/hooks/useIsMobile";
 import SortableItem from "../SortableItem";
 
 type Props<TContainer, TItem> = {
@@ -62,6 +62,7 @@ const FunnelDnd = <
     disabledColumns = false,
 }: Props<TContainer, TItem>) => {
     const sensors = useDndSensors();
+    const isMobile = useIsMobile();
 
     const settings = {
         dots: true,

src/components/ui/InPlaceInput/InPlaceInput.tsx

@@ -1,8 +1,8 @@
 import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
 import { TextInput } from "@mantine/core";
 import { Styles } from "@mantine/core/lib/core/styles-api/styles-api.types";
-import { isMobile } from "react-device-detect";
 import { modals } from "@mantine/modals";
+import useIsMobile from "@/hooks/useIsMobile";
 
 type Props = {
     defaultValue?: string;
@@ -24,6 +24,7 @@ const InPlaceInput: FC<Props> = ({
     const [isWriting, setIsWriting] = useState<boolean>(false);
     const [value, setValue] = useState<string>(defaultValue);
     const inputRef = useRef<HTMLInputElement>(null);
+    const isMobile = useIsMobile();
 
     useEffect(() => {
         if (isWriting && inputRef.current) {

src/hooks/useIsMobile.ts

@@ -0,0 +1,8 @@
+import { em } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+
+const useIsMobile = () => {
+    return useMediaQuery(`(max-width: ${em(750)})`);
+};
+
+export default useIsMobile;

yarn.lock

@@ -6139,7 +6139,6 @@ __metadata:
     postcss-simple-vars: "npm:^7.0.1"
     prettier: "npm:^3.5.3"
     react: "npm:19.1.0"
-    react-device-detect: "npm:^2.2.3"
     react-dom: "npm:19.1.0"
     react-imask: "npm:^7.6.1"
     react-redux: "npm:^9.2.0"
@@ -11591,18 +11590,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-device-detect@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "react-device-detect@npm:2.2.3"
-  dependencies:
-    ua-parser-js: "npm:^1.0.33"
-  peerDependencies:
-    react: ">= 0.14.0"
-    react-dom: ">= 0.14.0"
-  checksum: 10c0/396bbeeab0cb21da084c67434d204c9cf502fad6c683903313084d3f6487950a36a34f9bf67ccf5c1772a1bb5b79a2a4403fcfe6b51d93877db4c2d9f3a3a925
-  languageName: node
-  linkType: hard
-
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.4.0
   resolution: "react-docgen-typescript@npm:2.4.0"
@@ -13751,15 +13738,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^1.0.33":
-  version: 1.0.40
-  resolution: "ua-parser-js@npm:1.0.40"
-  bin:
-    ua-parser-js: script/cli.js
-  checksum: 10c0/2b6ac642c74323957dae142c31f72287f2420c12dced9603d989b96c132b80232779c429b296d7de4012ef8b64e0d8fadc53c639ef06633ce13d785a78b5be6c
-  languageName: node
-  linkType: hard
-
 "ufo@npm:^1.5.4":
   version: 1.6.1
   resolution: "ufo@npm:1.6.1"