don't portal popover

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)}
               >

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>

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

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}
       />
+    );
+
+    if (disablePortal) {
+      return content;
+    }
+
+    return (
+      <PopoverPrimitive.Portal container={container}>
+        {content}
       </PopoverPrimitive.Portal>
-  ),
+    );
+  },
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;