Fix issue with popovers not working in embedded app modals when put inside of a details component

[vividviolet]

Enable popover display state to be updated based on the parent's resize event.

Screen.Recording.2024-08-09.at.10.24.53.PM.mov

WHY are these changes introduced?

Fixes #12445 (comment)

WHAT is this pull request doing?

Attach the resize observer to the parent element of the activator when available instead of the activator itself.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[vividviolet]

/snapit

[github-actions]

🫰✨ Thanks @vividviolet! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240810023129"

[bakura10]

Thanks for working on that :). However it does not seem to work if the popover is nested in a div inside the details.

[bakura10]

I think a more robust approach would be to recursively get the parent element until you find one where offsetParent !== null:

let elementToObserve = activatorContainer.current;

while (elementToObserve.offsetParent !== null) {
  elementToObserve = elementToObserve.parentElement;
}