From 89a478ce0ac2e07a6ff7eaee4743a7935c4680ef Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 16 Jun 2024 12:58:28 -0600
Subject: [PATCH] Use modal on dropdowns for mobile only (#11993)

---
 web/src/components/filter/CameraGroupSelector.tsx | 2 +-
 web/src/components/player/VideoControls.tsx       | 4 ++--
 web/src/components/settings/PolygonItem.tsx       | 4 ++--
 web/src/views/live/LiveCameraView.tsx             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index ff7d9edfb..f6a5c5fdf 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -468,7 +468,7 @@ export function CameraGroupRow({
 
         {isMobile && (
           <>
-            <DropdownMenu modal={false}>
+            <DropdownMenu modal={!isDesktop}>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 7ccea48b6..8e86645e8 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import { isMobileOnly, isSafari } from "react-device-detect";
+import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
   DropdownMenu,
@@ -242,7 +242,7 @@ export default function VideoControls({
       )}
       {features.playbackRate && (
         <DropdownMenu
-          modal={false}
+          modal={!isDesktop}
           onOpenChange={(open) => {
             if (setControlsOpen) {
               setControlsOpen(open);
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index bd07b322b..68aa89978 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -19,7 +19,7 @@ import { LuCopy, LuPencil } from "react-icons/lu";
 import { FaDrawPolygon, FaObjectGroup } from "react-icons/fa";
 import { BsPersonBoundingBox } from "react-icons/bs";
 import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
-import { isMobile } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import {
   flattenPoints,
   parseCoordinates,
@@ -266,7 +266,7 @@ export default function PolygonItem({
 
         {isMobile && (
           <>
-            <DropdownMenu modal={false}>
+            <DropdownMenu modal={!isDesktop}>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index be0b4516c..5f43b4bc0 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -620,7 +620,7 @@ function PtzControlPanel({
         </>
       )}
       {(ptz?.presets?.length ?? 0) > 0 && (
-        <DropdownMenu modal={false}>
+        <DropdownMenu modal={!isDesktop}>
           <DropdownMenuTrigger asChild>
             <Button>
               <BsThreeDotsVertical />