fix(modal): prevent ion-content collapsing at content-based heights

core/src/components/content/content.tsx

@@ -46,8 +46,10 @@ export class Content implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
+  private sizeToContent = false;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
   private fullscreenResizeObserver?: ResizeObserver;
+  private sizeToContentObserver?: MutationObserver;
   private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
@@ -190,6 +192,7 @@ export class Content implements ComponentInterface {
 
     // Re-observe on reattach, since componentDidLoad only fires once.
     this.setupFullscreenResizeObserver();
+    this.setupSizeToContentObserver();
   }
 
   componentDidLoad() {
@@ -222,6 +225,7 @@ export class Content implements ComponentInterface {
     }
 
     this.destroyFullscreenResizeObserver();
+    this.destroySizeToContentObserver();
   }
 
   /**
@@ -258,6 +262,51 @@ export class Content implements ComponentInterface {
     this.fullscreenResizeObserver.observe(this.el);
   }
 
+  /**
+   * A modal's `--height` can be changed at runtime with no event to react
+   * to, either by setting the property directly or by toggling a class that
+   * changes which rule wins. Both of those mutate an attribute on the modal,
+   * so watch for that and re-evaluate. Viewport driven changes are already
+   * covered by the `resize` listener.
+   */
+  private setupSizeToContentObserver() {
+    if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    if (this.sizeToContentObserver !== undefined) {
+      return;
+    }
+
+    const modal = this.el.closest('ion-modal');
+    if (modal === null) {
+      return;
+    }
+
+    this.sizeToContentObserver = new MutationObserver(() => this.updateSizeToContent());
+    this.sizeToContentObserver.observe(modal, { attributes: true, attributeFilter: ['style', 'class'] });
+  }
+
+  private destroySizeToContentObserver() {
+    if (this.sizeToContentObserver !== undefined) {
+      this.sizeToContentObserver.disconnect();
+      this.sizeToContentObserver = undefined;
+    }
+  }
+
+  /**
+   * Re-renders when the overlay is no longer sized the way the last render
+   * assumed. Read in a `readTask` because resolving the custom property forces
+   * a style recalculation.
+   */
+  private updateSizeToContent() {
+    readTask(() => {
+      if (this.shouldSizeToContent() !== this.sizeToContent) {
+        forceUpdate(this);
+      }
+    });
+  }
+
   private destroyFullscreenResizeObserver() {
     if (this.fullscreenResizeObserver !== undefined) {
       this.fullscreenResizeObserver.disconnect();
@@ -310,6 +359,38 @@ export class Content implements ComponentInterface {
     return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
   }
 
+  /**
+   * Whether to size the component to its content height.
+   *
+   * This applies inside popovers and modals with a content-based `--height`,
+   * where the overlay does not provide the content with a definite height
+   * to fill.
+   *
+   * Only `--height` is consulted. Styling the wrapper directly, such as
+   * `ion-modal::part(content) { height: fit-content; }`, does not change
+   * `--height` and therefore cannot be observed. `--height` is the only
+   * supported way to opt into content-based sizing.
+   */
+  private shouldSizeToContent() {
+    if (hostContext('ion-popover', this.el)) {
+      return true;
+    }
+
+    const modal = this.el.closest('ion-modal');
+    if (modal === null) {
+      return false;
+    }
+
+    const height = getComputedStyle(modal).getPropertyValue('--height').trim();
+
+    /**
+     * Compared as a suffix so a value carrying a vendor prefix is still
+     * recognized, such as `-webkit-fit-content` or the `-moz-fit-content`
+     * that Firefox needed before 94.
+     */
+    return CONTENT_SIZED_HEIGHTS.some((value) => height.endsWith(value));
+  }
+
   private resize() {
     /**
      * Only force update if the component is rendered in a browser context.
@@ -320,6 +401,13 @@ export class Content implements ComponentInterface {
      * TODO: Remove if STENCIL-834 determines Stencil will account for this.
      */
     if (Build.isBrowser) {
+      /**
+       * A window resize can cross a media query that changes the modal's
+       * `--height`. The content's own offsets are unchanged, so neither branch
+       * below re-renders and the class from the last render would go stale.
+       */
+      this.updateSizeToContent();
+
       if (this.fullscreen) {
         readTask(() => this.readDimensions());
       } else if (this.cTop !== 0 || this.cBottom !== 0) {
@@ -538,7 +626,7 @@ export class Content implements ComponentInterface {
         class={createColorClasses(this.color, {
           [mode]: true,
           'content-fullscreen': this.fullscreen,
-          'content-sizing': hostContext('ion-popover', this.el),
+          'content-sizing': (this.sizeToContent = this.shouldSizeToContent()),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
         })}
@@ -579,6 +667,12 @@ export class Content implements ComponentInterface {
   }
 }
 
+/**
+ * `ion-modal` `--height` values that size the modal to its contents, leaving
+ * children an indefinite height to resolve against.
+ */
+const CONTENT_SIZED_HEIGHTS = ['auto', 'fit-content', 'min-content', 'max-content'];
+
 const getParentElement = (el: any) => {
   if (el.parentElement) {
     // normal element with a parent element

core/src/components/modal/modal.scss

@@ -27,7 +27,12 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  --max-height: auto;
+  /**
+   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
+   * overlay, giving the wrapper's flex children something to shrink 
+   * toward so `ion-content` scrolls instead of overflowing.
+   */
+  --max-height: 100%;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -87,8 +92,16 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
+  display: flex;
+
+  flex-direction: column;
+
   outline: none;
 }