remove workarounds for radix pointer events issues on dropdown and context menus

web/src/components/card/ExportCard.tsx

@@ -266,7 +266,7 @@ export function ExportCard({
         )}
         {!exportedRecording.in_progress && !selectionMode && (
           <div className="absolute bottom-2 right-3 z-40">
-            <DropdownMenu modal={false}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <BlurredIconButton
                   aria-label={t("tooltip.editName")}

web/src/components/card/ReviewCard.tsx

@@ -275,7 +275,7 @@ export default function ReviewCard({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
-        <ContextMenu key={event.id} modal={false}>
+        <ContextMenu key={event.id}>
           <ContextMenuTrigger asChild>{content}</ContextMenuTrigger>
           <ContextMenuContent>
             <ContextMenuItem>

web/src/components/filter/CameraGroupSelector.tsx

@@ -592,7 +592,7 @@ export function CameraGroupRow({
 
         {isMobile && !isReadOnly && (
           <>
-            <DropdownMenu modal={!isDesktop}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>

web/src/components/filter/CamerasFilterButton.tsx

@@ -136,7 +136,6 @@ export function CamerasFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) {

web/src/components/menu/AccountSettings.tsx

@@ -81,7 +81,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   };
 
   return (
-    <Container modal={!isDesktop}>
+    <Container>
       <Tooltip>
         <Trigger asChild>
           <TooltipTrigger asChild>

web/src/components/menu/GeneralSettings.tsx

@@ -205,7 +205,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
 
   return (
     <>
-      <Container modal={!isDesktop}>
+      <Container>
         <Trigger>
           <Tooltip>
             <TooltipTrigger asChild>

web/src/components/menu/LiveContextMenu.tsx

@@ -272,7 +272,7 @@ export default function LiveContextMenu({
 
   return (
     <div className={cn("w-full", className)}>
-      <ContextMenu key={camera} modal={false} onOpenChange={handleOpenChange}>
+      <ContextMenu key={camera} onOpenChange={handleOpenChange}>
         <ContextMenuTrigger>{children}</ContextMenuTrigger>
         <ContextMenuContent>
           <div className="flex flex-col items-start gap-1 py-1 pl-2">

web/src/components/menu/SearchResultActions.tsx

@@ -258,13 +258,13 @@ export default function SearchResultActions({
         </AlertDialogContent>
       </AlertDialog>
       {isContextMenu ? (
-        <ContextMenu modal={false}>
+        <ContextMenu>
           <ContextMenuTrigger>{children}</ContextMenuTrigger>
           <ContextMenuContent>{menuItems}</ContextMenuContent>
         </ContextMenu>
       ) : (
         <>
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
                 <FiMoreVertical className="size-5" />

web/src/components/overlay/ActionsDropdown.tsx

@@ -22,7 +22,7 @@ export default function ActionsDropdown({
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
   return (
-    <DropdownMenu modal={false}>
+    <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           className="flex items-center gap-2"

web/src/components/overlay/ClassificationSelectionDialog.tsx

@@ -130,7 +130,6 @@ export default function ClassificationSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
-            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -91,7 +91,6 @@ export default function FaceSelectionDialog({
           </SelectorTrigger>
           <SelectorContent
             className={cn("", isMobile && "mx-1 gap-2 rounded-t-2xl px-4")}
-            onCloseAutoFocus={(e) => e.preventDefault()}
           >
             {isMobile && (
               <DrawerHeader className="sr-only">

web/src/components/overlay/PtzControlPanel.tsx

@@ -14,7 +14,7 @@ import {
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraPtzInfo } from "@/types/ptz";
 import React, { useCallback } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { BsThreeDotsVertical } from "react-icons/bs";
 import {
   FaAngleDown,
@@ -292,7 +292,7 @@ export default function PtzControlPanel({
         </Tooltip>
       )}
       {(ptz?.presets?.length ?? 0) > 0 && (
-        <DropdownMenu modal={!isDesktop}>
+        <DropdownMenu>
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
@@ -306,10 +306,7 @@ export default function PtzControlPanel({
             </TooltipContent>
           </Tooltip>
 
-          <DropdownMenuContent
+          <DropdownMenuContent className="scrollbar-container max-h-[40dvh] overflow-y-auto">
-            className="scrollbar-container max-h-[40dvh] overflow-y-auto"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
             {ptz?.presets.map((preset) => (
               <DropdownMenuItem
                 key={preset}

web/src/components/player/VideoControls.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { LuFolderX } from "react-icons/lu";
-import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
+import { isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
   DropdownMenu,
@@ -246,7 +246,6 @@ export default function VideoControls({
       )}
       {features.playbackRate && (
         <DropdownMenu
-          modal={!isDesktop}
           onOpenChange={(open) => {
             if (setControlsOpen) {
               setControlsOpen(open);

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 { isDesktop, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { toRGBColorString } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
@@ -524,7 +524,7 @@ export default function PolygonItem({
 
         {isMobile && (
           <>
-            <DropdownMenu modal={!isDesktop}>
+            <DropdownMenu>
               <DropdownMenuTrigger>
                 <HiOutlineDotsVertical className="size-5" />
               </DropdownMenuTrigger>

web/src/components/settings/ProfileSectionDropdown.tsx

@@ -41,7 +41,7 @@ export function ProfileSectionDropdown({
     : null;
 
   return (
-    <DropdownMenu modal={false}>
+    <DropdownMenu>
       <DropdownMenuTrigger asChild>
         {iconOnly ? (
           <Button variant="outline" size="sm">

web/src/components/ws/WsMessageFeed.tsx

@@ -351,7 +351,6 @@ function TopicFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) setCurrentTopics(selectedTopics);
@@ -517,7 +516,6 @@ function WsCamerasFilterButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open) => {
         if (!open) setCurrentCameras(selectedCameras);

web/src/pages/FaceLibrary.tsx

@@ -594,7 +594,7 @@ function LibrarySelector({
         forbiddenErrorMessage={t("description.nameCannotContainHash")}
       />
 
-      <DropdownMenu modal={false}>
+      <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
             {pageTitle}

web/src/pages/Settings.tsx

@@ -2018,7 +2018,6 @@ function CameraSelectButton({
 
   return (
     <DropdownMenu
-      modal={false}
       open={open}
       onOpenChange={(open: boolean) => {
         if (!open) {

web/src/views/classification/ModelSelectionView.tsx

@@ -342,7 +342,7 @@ function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
           {config.name}
         </div>
         <div className="absolute bottom-2 right-2 z-40">
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
               <BlurredIconButton>
                 <FiMoreVertical className="size-5 text-white" />

web/src/views/classification/ModelTrainingView.tsx

@@ -698,7 +698,7 @@ function LibrarySelector({
         regexErrorMessage={t("description.invalidName")}
       />
 
-      <DropdownMenu modal={false}>
+      <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
             {pageTitle}

web/src/views/live/LiveCameraView.tsx

@@ -1164,7 +1164,7 @@ function FrigateCameraFeatures({
           loading={isSnapshotLoading}
         />
         {!fullscreen && (
-          <DropdownMenu modal={false}>
+          <DropdownMenu>
             <DropdownMenuTrigger>
               <div
                 className={cn(