From 9cb3e11df6b35948d3f520945934b32f7ca1cd7b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 30 May 2024 08:39:14 -0500
Subject: [PATCH] non-modal dropdown menus (#11649)

---
 web/src/components/filter/CameraGroupSelector.tsx | 2 +-
 web/src/components/filter/ReviewFilterGroup.tsx   | 1 +
 web/src/components/menu/AccountSettings.tsx       | 2 +-
 web/src/components/menu/GeneralSettings.tsx       | 2 +-
 web/src/components/player/VideoControls.tsx       | 1 +
 web/src/components/settings/PolygonItem.tsx       | 2 +-
 web/src/pages/Settings.tsx                        | 1 +
 web/src/views/live/LiveCameraView.tsx             | 2 +-
 8 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index d9fc9f420..ed366e0a8 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -468,7 +468,7 @@ export function CameraGroupRow({
 
         {isMobile && (
           <>
-            <DropdownMenu>
+            <DropdownMenu modal={false}>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index f63ce4c9e..ffc5bd943 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -365,6 +365,7 @@ export function CamerasFilterButton({
 
   return (
     <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) {
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index 7927ae94a..319dfc41c 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -34,7 +34,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
 
   return (
-    <Container>
+    <Container modal={!isDesktop}>
       <Trigger>
         <Tooltip>
           <TooltipTrigger asChild>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index cd0ce1749..794728d4d 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -114,7 +114,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
 
   return (
     <>
-      <Container>
+      <Container modal={!isDesktop}>
         <Trigger>
           <Tooltip>
             <TooltipTrigger asChild>
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 35b9522f4..65a37a096 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -230,6 +230,7 @@ export default function VideoControls({
       )}
       {features.playbackRate && (
         <DropdownMenu
+          modal={false}
           onOpenChange={(open) => {
             if (setControlsOpen) {
               setControlsOpen(open);
diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 836bc38f7..bd07b322b 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -266,7 +266,7 @@ export default function PolygonItem({
 
         {isMobile && (
           <>
-            <DropdownMenu>
+            <DropdownMenu modal={false}>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index d2239f647..e05f446df 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -284,6 +284,7 @@ function CameraSelectButton({
 
   return (
     <DropdownMenu
+      modal={false}
       open={open}
       onOpenChange={(open: boolean) => {
         if (!open) {
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index c6f4f8d93..03ffd91d9 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -583,7 +583,7 @@ function PtzControlPanel({
         </>
       )}
       {(ptz?.presets?.length ?? 0) > 0 && (
-        <DropdownMenu>
+        <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
             <Button>
               <BsThreeDotsVertical />