Fix Safari popover problem

lightrag_webui/src/components/graph/LayoutsControl.tsx

@@ -289,7 +289,7 @@ const LayoutsControl = () => {
   )
 
   return (
-    <>
+    <div>
       <div>
         {layouts[layout] && 'worker' in layouts[layout] && (
           <WorkerLayoutControl
@@ -310,7 +310,14 @@ const LayoutsControl = () => {
               <GripIcon />
             </Button>
           </PopoverTrigger>
-          <PopoverContent side="right" align="center" className="p-1">
+          <PopoverContent
+            side="right"
+            align="start"
+            sideOffset={8}
+            collisionPadding={5}
+            sticky="always"
+            className="p-1 min-w-auto"
+          >
             <Command>
               <CommandList>
                 <CommandGroup>
@@ -331,7 +338,7 @@ const LayoutsControl = () => {
           </PopoverContent>
         </Popover>
       </div>
-    </>
+    </div>
   )
 }
 

lightrag_webui/src/components/graph/Settings.tsx

@@ -245,8 +245,10 @@ export default function Settings() {
         </PopoverTrigger>
         <PopoverContent
           side="right"
-          align="start"
-          className="mb-2 p-2"
+          align="end"
+          sideOffset={8}
+          collisionPadding={5}
+          className="p-2 max-w-[200px]"
           onCloseAutoFocus={(e) => e.preventDefault()}
         >
           <div className="flex flex-col gap-2">

lightrag_webui/src/components/ui/Popover.tsx

@@ -7,20 +7,32 @@ const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
+// Define the props type to include positioning props
+type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+  sticky?: 'partial' | 'always';
+  avoidCollisions?: boolean;
+};
+
 const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border p-4 shadow-md outline-none',
-      className
-    )}
-    {...props}
-  />
+  PopoverContentProps
+>(({ className, align = 'center', sideOffset = 4, collisionPadding, sticky, avoidCollisions = false, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      collisionPadding={collisionPadding}
+      sticky={sticky}
+      avoidCollisions={avoidCollisions}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName