Recalculate popover position when resized while open

[acelaya]

This PR fixes an incorrect popover positioning when it gets resized or its contents change while it is open, as the position is calculated only when opened.

With this, we add a ResizeObserver which observes the popover, and if it gets resized, we re-calculate its position.

The incorrect position usually happens only if the popover had to pop up.

This is how it looks before the fix, when the contents of the popover change after it has been opened:

resize-calculate-2025-01-20_11.54.40.mp4

And this is how it looks once fixed:

resize-calculate-fixed-2025-01-20_11.55.11.mp4

There's a bit of flickering in the screen recordings above. I think that's an issue on the video recording software, as I don't see that on my screen.

The first time I notice this issue was while working in at-mentions. The suggestions popover content can change while it's open, causing the position to be wrong.

Test steps

1. Apply this diff:

   diff --git a/src/pattern-library/examples/popover-basic.tsx b/src/pattern-library/examples/popover-basic.tsx
   index e44656c..acc0092 100644
   --- a/src/pattern-library/examples/popover-basic.tsx
   +++ b/src/pattern-library/examples/popover-basic.tsx
   @@ -1,4 +1,4 @@
   -import { useRef, useState } from 'preact/hooks';
   +import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
    
    import { Popover } from '../../components/feedback';
    import { Button } from '../../components/input';
   @@ -6,6 +6,27 @@ import { Button } from '../../components/input';
    export default function App() {
      const [open, setOpen] = useState(false);
      const buttonRef = useRef<HTMLButtonElement | null>(null);
   +  const [showSecondParagraph, setShowSecondParagraph] = useState(true);
   +  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
   +  const cancelTimeout = useCallback(() => {
   +    if (timeoutRef.current) {
   +      clearTimeout(timeoutRef.current);
   +    }
   +    timeoutRef.current = undefined;
   +  }, []);
   +
   +  useEffect(() => {
   +    if (open) {
   +      timeoutRef.current = setTimeout(() => {
   +        cancelTimeout();
   +        setShowSecondParagraph(false);
   +      }, 2000);
   +    } else {
   +      setShowSecondParagraph(true);
   +    }
   +
   +    return cancelTimeout;
   +  }, [cancelTimeout, open]);
    
      return (
        <div className="relative flex justify-center">
   @@ -22,7 +43,8 @@ export default function App() {
            anchorElementRef={buttonRef}
            classes="p-2"
          >
   -        The content of the popover goes here
   +        <p>The content of the popover goes here</p>
   +        {showSecondParagraph && <p>Disappears in 2s</p>}
          </Popover>
        </div>
      );

2. Go to http://localhost:4001/feedback-popover
3. Scroll or resize the window so that the first "Open popover" button is close to the bottom of the viewport. That will cause the popover to pop-up.
4. Open the popover and wait for 2 seconds for part of its content to disappear. In this branch, the popover should reposition to keep stuck on top of the button. In `main branch, it will keep its previous position, increasing the distance with the top of the button.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (0255544) to head (2ccac98).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1855   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           70        70           
  Lines         1303      1306    +3     
  Branches       482       482           
=========================================
+ Hits          1303      1306    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[acelaya]

This test fails without the observer logic.

[robertknight]

LGTM.

[robertknight]

Since this is a local hook I think it is OK to rely on the caller to ensure that popoverRef.current is set if popoverOpen is true. If this hook was exposed for consumers of the crate to use, I think we'd need to be more defensive.