update popover position logic

src/ui/client/builder/pages/instances.py

@@ -323,7 +323,7 @@ def instances_new_form() -> dict:
                             popovers=[
                                 {
                                     "iconName": "exclamation",
-                                    "iconColor": "yellow-darker",
+                                    "color": "yellow-darker",
                                     "text": "instances_hostname_warning_desc",
                                 },
                                 {

src/ui/client/dashboard/components/Widget/Popover.vue

@@ -87,9 +87,18 @@ function showPopover() {
 
   // Position popover relative to btn
   const popoverBtnRect = popoverBtn.value.getBoundingClientRect();
-  popoverContainer.value.style.right = `${
-    window.innerWidth - popoverBtnRect.left - popoverBtnRect.width / 1.5
-  }px`;
+  const popoverContainerRect = popoverContainer.value.getBoundingClientRect();
+  const popoverGroup =
+    popoverBtn.value.parentElement.querySelectorAll(".popover-btn");
+  const popoverGroupNums = popoverGroup.length;
+  const popoverIndex = Array.from(popoverGroup).indexOf(popoverBtn.value);
+  popoverContainer.value.style.transform = `translateX(-${
+    popoverContainerRect.width / 2 -
+    (popoverBtnRect.width * popoverGroupNums) / 2 -
+    popoverBtnRect.width * (popoverIndex - popoverGroupNums)
+  }px) translateY(${
+    popoverContainerRect.height / 2 - popoverBtnRect.height / 2 + 4
+  }px)`;
 
   // Show popover
   setTimeout(() => {

src/ui/client/input.css

@@ -651,7 +651,7 @@ body {
 }
 
 .popover-container {
-  @apply pointer-events-none fixed max-w-[80vw] sm:max-w-[200px]  justify-center items-center dark:brightness-90 transition rounded-md p-3;
+  @apply pointer-events-none fixed max-w-[80vw] sm:max-w-[200px] w-full justify-center items-center dark:brightness-90 transition rounded-md p-3;
 }
 
 .open.popover-container {