fix(popover): recalculate the content dimensions after the header has a height

Author: brandyscarney

core/src/components/popover/popover.tsx

@@ -491,6 +491,8 @@ export class Popover implements ComponentInterface, PopoverInterface {
       inline
     );
 
+    this.recalculateContentOnHeaderReady();
+
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
@@ -540,6 +542,38 @@ export class Popover implements ComponentInterface, PopoverInterface {
     unlock();
   }
 
+  /**
+   * Watch the header for height changes and trigger content dimension
+   * recalculation when the header has a height > 0. This sets the offset-top
+   * of the content to the height of the header correctly.
+   */
+  private recalculateContentOnHeaderReady() {
+    const popoverContent = this.el.shadowRoot?.querySelector('.popover-content');
+    if (!popoverContent) {
+      return;
+    }
+
+    const contentContainer = this.usersElement || popoverContent;
+
+    const header = contentContainer.querySelector('ion-header') as HTMLElement | null;
+    const contentElements = contentContainer.querySelectorAll('ion-content');
+
+    if (!header || contentElements.length === 0) {
+      return;
+    }
+
+    const ro = new ResizeObserver(async () => {
+      if (header.offsetHeight > 0) {
+        ro.disconnect();
+        for (const contentEl of contentElements) {
+          await contentEl.recalculateDimensions();
+        }
+      }
+    });
+
+    ro.observe(header);
+  }
+
   /**
    * Dismiss the popover overlay after it has been presented.
    * This is a no-op if the overlay has not been presented yet. If you want