use drawer on mobile

web/src/components/overlay/detail/AnnotationSettingsPane.tsx

@@ -1,4 +1,3 @@
-import Heading from "@/components/ui/heading";
 import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -133,12 +132,12 @@ export function AnnotationSettingsPane({
   }
 
   return (
-    <div className="space-y-3 p-4">
+    <div className="p-4">
-      <Heading as="h4" className="my-2">
+      <div className="text-md mb-2">
         {t("trackingDetails.annotationSettings.title")}
-      </Heading>
+      </div>
 
-      <Separator className="my-2 flex bg-secondary" />
+      <Separator className="mb-4 flex bg-secondary" />
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -65,6 +65,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import { LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { FaPencilAlt } from "react-icons/fa";
@@ -150,7 +151,7 @@ function TabsWithActions({
         setSimilarity={setSimilarity}
       />
       {pageToggle === "tracking_details" && (
-        <AnnotationSettingsPopover
+        <AnnotationSettings
           search={search}
           open={isPopoverOpen}
           setIsOpen={setIsPopoverOpen}
@@ -160,17 +161,17 @@ function TabsWithActions({
   );
 }
 
-type AnnotationSettingsPopoverProps = {
+type AnnotationSettingsProps = {
   search: SearchResult;
   open: boolean;
   setIsOpen: (open: boolean) => void;
 };
 
-function AnnotationSettingsPopover({
+function AnnotationSettings({
   search,
   open,
   setIsOpen,
-}: AnnotationSettingsPopoverProps) {
+}: AnnotationSettingsProps) {
   const { t } = useTranslation(["views/explore"]);
   const { annotationOffset, setAnnotationOffset } = useDetailStream();
 
@@ -202,29 +203,39 @@ function AnnotationSettingsPopover({
     }
   }, [open]);
 
+  const Overlay = isDesktop ? Popover : Drawer;
+  const Trigger = isDesktop ? PopoverTrigger : DrawerTrigger;
+  const Content = isDesktop ? PopoverContent : DrawerContent;
+
   return (
     <div className="ml-2">
-      <Popover modal={true} open={open} onOpenChange={handleOpenChange}>
+      <Overlay modal={isDesktop} open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger
+        <Trigger asChild>
-          asChild
-          onPointerDown={registerTriggerCloseIntent}
-          onKeyDown={(event) => {
-            if (open && (event.key === "Enter" || event.key === " ")) {
-              registerTriggerCloseIntent();
-            }
-          }}
-        >
           <Button
             type="button"
             className="size-7 p-1.5"
             variant={open ? "select" : "ghost"}
             aria-label={t("trackingDetails.adjustAnnotationSettings")}
             aria-expanded={open}
+            onPointerDown={registerTriggerCloseIntent}
+            onKeyDown={(event) => {
+              if (open && (event.key === "Enter" || event.key === " ")) {
+                registerTriggerCloseIntent();
+              }
+            }}
           >
             <PiSlidersHorizontalBold className="size-5" />
           </Button>
-        </PopoverTrigger>
+        </Trigger>
-        <PopoverContent className="w-[90vw] max-w-md p-0" align="end">
+
+        <Content
+          className={
+            isDesktop
+              ? "w-[90vw] max-w-md p-0"
+              : "mx-1 max-h-[75dvh] overflow-hidden rounded-t-2xl px-4 pb-4"
+          }
+          {...(isDesktop ? { align: "end" } : {})}
+        >
           <AnnotationSettingsPane
             event={search as unknown as Event}
             annotationOffset={annotationOffset}
@@ -237,8 +248,8 @@ function AnnotationSettingsPopover({
               }
             }}
           />
-        </PopoverContent>
+        </Content>
-      </Popover>
+      </Overlay>
     </div>
   );
 }