[PositionedOverlay][Tooltip] Fix tooltip scroll bug (#7899)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Closes https://github.com/Shopify/core-workflows/issues/663

This PR fixes a bug with `Tooltip` and other consumers of
`PositionedOverlay` where the position of the overlay does not correctly
update when the overlay's closest `Scrollable` ancestor is **_not_**
being scrolled, but some more distant ancestor node **_is_** being
scrolled. In such cases, the overlay position moves with the more
distant ancestor node rather than the correct `Scrollable` node.

(The bug specifically occurs `Tooltip` instances rendered in a
`Scrollable`, because the `PositionedOverlay` from the tooltip is
rendered in a `PortalContainer`, which is a descendant of the `body`
rather than the tooltip's `Scrollable`.)

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

This PR ensures that `scroll` event handlers are added to all scrollable
ancestors of the component, rather than just the nearest scrollable
ancestor. This fixes a bug where the tooltip "sticks" to the page body
rather than the correct scrollable container.

This video shows the correct behaviour:


https://user-images.githubusercontent.com/1948799/210642458-ec0f7a77-9021-46c9-8283-8e7665a05ade.mov

### How to 🎩

Tophatting URL:
https://admin.web.tooltip-polaris.jerad-gallinger.us.spin.dev/store/shop1

- Open the admin
- Resize your browser window to be tall enough for the left nav to not
scroll
- In the left-hand nav, hover over `Online Store`. The tooltip should
appear as usual.
- While still hovering over the nav item, scroll the page (with up/down
arrow keys, trackpad gestures, or scroll wheel). When the main page
content scrolls, the tooltip should reposition so that it still appears
above the nav item (rather than scrolling with the main page content).
- Resize the height of the browser so that the left nav content
overflows the height of the nav and becomes scrollable.
- Scroll the left nav to the bottom of its contents. Hover over the
`Online Store` item so the tooltip appears.
- While still hovering over the nav item, scroll the page down (with
up/down arrow keys, trackpad gestures, or scroll wheel). When the main
page content scrolls, the tooltip should reposition so that it still
appears above the nav item (rather than scrolling with the main page
content).

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [X] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: jeradg

.changeset/fair-queens-sniff.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed a bug where Tooltips nested in Scrollable containers sometimes don't update their positions correctly

polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -83,7 +83,7 @@ export class PositionedOverlay extends PureComponent<
   };
 
   private overlay: HTMLElement | null = null;
-  private scrollableContainer: HTMLElement | Document | null = null;
+  private scrollableContainers: (HTMLElement | Document)[] = [];
   private observer: MutationObserver;
 
   constructor(props: PositionedOverlayProps) {
@@ -93,23 +93,20 @@ export class PositionedOverlay extends PureComponent<
   }
 
   componentDidMount() {
-    this.scrollableContainer = Scrollable.forNode(this.props.activator);
-    if (this.scrollableContainer && !this.props.fixed) {
-      this.scrollableContainer.addEventListener(
-        'scroll',
-        this.handleMeasurement,
-      );
+    this.setScrollableContainers();
+
+    if (this.scrollableContainers.length && !this.props.fixed) {
+      this.registerScrollHandlers();
     }
+
     this.handleMeasurement();
   }
 
   componentWillUnmount() {
     this.observer.disconnect();
-    if (this.scrollableContainer && !this.props.fixed) {
-      this.scrollableContainer.removeEventListener(
-        'scroll',
-        this.handleMeasurement,
-      );
+
+    if (this.scrollableContainers.length && !this.props.fixed) {
+      this.unregisterScrollHandlers();
     }
   }
 
@@ -160,6 +157,10 @@ export class PositionedOverlay extends PureComponent<
     );
   }
 
+  get firstScrollableContainer(): HTMLElement | Document | null {
+    return this.scrollableContainers[0] ?? null;
+  }
+
   forceUpdatePosition() {
     // Wait a single animation frame before re-measuring.
     // Consumer's may also need to setup their own timers for
@@ -186,6 +187,37 @@ export class PositionedOverlay extends PureComponent<
     this.overlay = node;
   };
 
+  private setScrollableContainers = () => {
+    const containers: (HTMLElement | Document)[] = [];
+    let scrollableContainer = Scrollable.forNode(this.props.activator);
+
+    if (scrollableContainer) {
+      containers.push(scrollableContainer);
+
+      while (scrollableContainer?.parentElement) {
+        scrollableContainer = Scrollable.forNode(
+          scrollableContainer.parentElement,
+        );
+
+        containers.push(scrollableContainer);
+      }
+    }
+
+    this.scrollableContainers = containers;
+  };
+
+  private registerScrollHandlers = () => {
+    this.scrollableContainers.forEach((node) => {
+      node.addEventListener('scroll', this.handleMeasurement);
+    });
+  };
+
+  private unregisterScrollHandlers = () => {
+    this.scrollableContainers.forEach((node) => {
+      node.removeEventListener('scroll', this.handleMeasurement);
+    });
+  };
+
   private handleMeasurement = () => {
     const {lockPosition, top} = this.state;
 
@@ -201,7 +233,7 @@ export class PositionedOverlay extends PureComponent<
         measuring: true,
       }),
       () => {
-        if (this.overlay == null || this.scrollableContainer == null) {
+        if (this.overlay == null || this.firstScrollableContainer == null) {
           return;
         }
 
@@ -222,9 +254,9 @@ export class PositionedOverlay extends PureComponent<
         const activatorRect = getRectForNode(preferredActivator);
 
         const currentOverlayRect = getRectForNode(this.overlay);
-        const scrollableElement = isDocument(this.scrollableContainer)
+        const scrollableElement = isDocument(this.firstScrollableContainer)
           ? document.body
-          : this.scrollableContainer;
+          : this.firstScrollableContainer;
         const scrollableContainerRect = getRectForNode(scrollableElement);
 
         const overlayRect = fullWidth