fix(popover): handle scrolling in content so header can be sticky (#24294)

core/src/components/content/content.scss

@@ -140,10 +140,37 @@
 }
 
 :host(.content-sizing) {
+  display: flex;
+
+  flex-direction: column;
+
+  /**
+   * This resolves a sizing issue in popovers where extra long content
+   * would overflow the popover's height, preventing scrolling. It's a
+   * quirk of flexbox that forces the content to shrink to fit.
+   *
+   * overflow: hidden can't be used here because it prevents the visual
+   * effect from showing on translucent headers.
+   */
+  min-height: 0;
+
   contain: none;
 }
 :host(.content-sizing) .inner-scroll {
   position: relative;
+
+  /**
+   * Because the outer content has display: flex here (to help enable
+   * scrolling in a popover), offsetting via `top` (such as when using
+   * a translucent header) creates white space under the content. Use
+   * a negative margin instead to keep the bottom in place. (A similar
+   * thing happens with `bottom` and footers.)
+   */
+  top: 0;
+  bottom: 0;
+  
+  margin-top: calc(var(--offset-top) * -1);
+  margin-bottom: calc(var(--offset-bottom) * -1);
 }
 
 .transition-effect {

core/src/components/content/content.tsx

@@ -374,10 +374,17 @@ const getPageElement = (el: HTMLElement) => {
   if (tabs) {
     return tabs;
   }
-  const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+
+  /**
+   * If we're in a popover, we need to use its wrapper so we can account for space
+   * between the popover and the edges of the screen. But if the popover contains
+   * its own page element, we should use that instead.
+   */
+  const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
   if (page) {
     return page;
   }
+
   return getParentElement(el);
 };