Ion-Modal dynamic height

dynamic-height-modal.component.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>My Modal</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   <!-- This div is necessary to apply local styles in ion-content. -->
  <div>  
    <ion-list>
      <ion-item>
        <ion-avatar slot="start">
          <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
        </ion-avatar>
        <ion-label>
          <h2>Connor Smith</h2>
          <p>Sales Rep</p>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start">
          <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
        </ion-avatar>
        <ion-label>
          <h2>Daniel Smith</h2>
          <p>Product Designer</p>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start">
          <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
        </ion-avatar>
        <ion-label>
          <h2>Greg Smith</h2>
          <p>Director of Operations</p>
        </ion-label>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start">
          <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
        </ion-avatar>
        <ion-label>
          <h2>Zoey Smith</h2>
          <p>CEO</p>
        </ion-label>
      </ion-item>
      
    </ion-list>
  </div>

</ion-content>

dynamic-height-modal.component.scss

/*
 * IonModal Local CSS
 * ----------------------------------------------------------------------------
 * This stylesheet is used to apply styles to the dynamic-height-modal component.
 */

dynamic-height-modal.component.ts

import { Component, Input } from '@angular/core';
import { Components } from '@ionic/core';

@Component({
  selector: 'app-dynamic-height-modal',
  templateUrl: './dynamic-height-modal.component.html',
  styleUrls: ['./dynamic-height-modal.component.scss'],
  styles: [
    `
      :host,
      ion-content,
      ion-content::part(scroll) {
        /* For modal auto height.*/
        display: inline;
        position: relative;
      }
    `,
  ],
})
export class DynamicHeightModalComponent {
  @Input() private modal!: Components.IonModal;

  constructor() {}

  ngOnInit() {}

  dismiss() {
    this.modal.dismiss();
  }
}

dynamic-height-modal.global.scss

/*
 * IonModal Global CSS
 * ----------------------------------------------------------------------------
 * Import this stylesheet in the global.scss to apply ion-modal globally and make this with dynamic height
 * modify to your style if necessary
 *
 * This solution is based on the following issue:
 * https://github.com/ionic-team/ionic-docs/issues/3424#issuecomment-1923820099
 * 
 * A demo can be found here:
 * https://stackblitz.com/edit/ionic6-angular13-apxujk?file=src%2Fapp%2Fmy-modal.component.ts
 */
ion-modal.dynamic-height {
  --width: 100%;
  --height: unset;
  --max-height: 100%;
  --max-width: 100%;
  --border-radius: 5px;
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
  padding: 10px;
  &.dynamic-height::part(content) {
    overflow: auto;
  }
  
  &.dynamic-height .ion-page {
    overflow: unset;
  }
}