Use modal on dropdowns for mobile only (#11993)

blakeblackshear · Jun 16, 2024 · 89a478c · 89a478c
1 parent f1bb797
commit 89a478c
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -620,7 +620,7 @@ function PtzControlPanel({
  </>
  )}
  {(ptz?.presets?.length ?? 0) > 0 && (
- <DropdownMenu modal={false}>
+ <DropdownMenu modal={!isDesktop}>
  <DropdownMenuTrigger asChild>
  <Button>
  <BsThreeDotsVertical />