From cd399f6c674e23da866409b8e2298deedcfb38b7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 6 Nov 2025 09:07:44 -0600
Subject: [PATCH] don't portal popover

---
 .../overlay/detail/AnnotationSettingsPane.tsx |  3 +-
 .../overlay/detail/DetailActionsMenu.tsx      |  2 +-
 .../overlay/detail/SearchDetailDialog.tsx     |  3 +-
 web/src/components/ui/popover.tsx             | 28 +++++++++++++++----
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
index d683a83ad..54805ecd2 100644
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@@ -156,6 +156,7 @@ export function AnnotationSettingsPane({
                     <Trans ns="views/explore">
                       trackingDetails.annotationSettings.offset.millisecondsToOffset
                     </Trans>
+                    <FormMessage />
                     <div className="mt-2">
                       {t("trackingDetails.annotationSettings.offset.tips")}
                       <div className="mt-2 flex items-center text-primary">
@@ -183,7 +184,6 @@ export function AnnotationSettingsPane({
                     </FormControl>
                   </div>
                 </div>
-                <FormMessage />
               </FormItem>
             )}
           />
@@ -192,6 +192,7 @@ export function AnnotationSettingsPane({
             <div className="flex flex-row gap-2 pt-5">
               <Button
                 className="flex flex-1"
+                variant="default"
                 aria-label={t("button.apply", { ns: "common" })}
                 onClick={form.handleSubmit(onApply)}
               >
diff --git a/web/src/components/overlay/detail/DetailActionsMenu.tsx b/web/src/components/overlay/detail/DetailActionsMenu.tsx
index 2f4041e2a..a22551875 100644
--- a/web/src/components/overlay/detail/DetailActionsMenu.tsx
+++ b/web/src/components/overlay/detail/DetailActionsMenu.tsx
@@ -49,7 +49,7 @@ export default function DetailActionsMenu({
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger>
-        <div className="rounded p-1 pr-2" role="button">
+        <div className="rounded" role="button">
           <HiDotsHorizontal className="size-4 text-muted-foreground" />
         </div>
       </DropdownMenuTrigger>
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 7e6ac3e08..264ce9dec 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -252,10 +252,11 @@ function AnnotationSettings({
         <Content
           className={
             isDesktop
-              ? "w-[90vw] max-w-md p-0"
+              ? "w-[90vw] max-w-md bg-background_alt p-0"
               : "mx-1 max-h-[75dvh] overflow-hidden rounded-t-2xl px-4 pb-4"
           }
           {...contentProps}
+          {...(isDesktop ? { disablePortal: true } : {})}
           data-annotation-popover
         >
           <AnnotationSettingsPane
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
index bba83f977..017d1bdc7 100644
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -11,13 +11,21 @@ const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
     container?: HTMLElement | null;
+    disablePortal?: boolean;
   }
 >(
   (
-    { className, container, align = "center", sideOffset = 4, ...props },
+    {
+      className,
+      container,
+      disablePortal = false,
+      align = "center",
+      sideOffset = 4,
+      ...props
+    },
     ref,
-  ) => (
-    <PopoverPrimitive.Portal container={container}>
+  ) => {
+    const content = (
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
@@ -28,8 +36,18 @@ const PopoverContent = React.forwardRef<
         )}
         {...props}
       />
-    </PopoverPrimitive.Portal>
-  ),
+    );
+
+    if (disablePortal) {
+      return content;
+    }
+
+    return (
+      <PopoverPrimitive.Portal container={container}>
+        {content}
+      </PopoverPrimitive.Portal>
+    );
+  },
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;