fix: Popover is positioned incorrectly when the layout changes

src/popover/container.tsx

@@ -99,11 +99,11 @@
     /*
     This is a heuristic. Some layout changes are caused by user clicks (e.g. toggling the tools panel, submitting a form),
     and by tracking the click event we can adapt the popover's position to the new layout.
-
-    TODO: extend this to Enter and Spacebar?
     */
 
-    const onClick = (event: UIEvent | KeyboardEvent) => {
+    const controller = new AbortController();
+
+    const onClick = async (event: UIEvent | KeyboardEvent) => {
       if (
         // Do not update position if keepPosition is true.
         keepPosition ||
@@ -114,14 +114,22 @@
         return;
       }
 
-      requestAnimationFrame(() => {
+      // Continuously update the popover position for one second to account for any layout changes
+      // and animations. This runs only while the CPU is otherwise idle.
+      const targetTime = performance.now() + 1_000;
+
+      while (performance.now() < targetTime) {
+        if (controller.signal.aborted) {
+          break;
+        }
+
         updatePositionHandler();
-      });
+        await new Promise(r => requestIdleCallback(r));
+      }
     };
 
     const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());
     const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());
-    const controller = new AbortController();
 
     window.addEventListener('click', onClick, { signal: controller.signal });
     window.addEventListener('resize', updatePositionOnResize, { signal: controller.signal });