discourse/app/assets/stylesheets/mobile/modal.scss

// base styles for every modal popup used in Discourse

// prevents bg scrolling when modal is open
html:has(.d-modal) {
  overflow: hidden;
}

html.keyboard-visible.mobile-view {
  .d-modal {
    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
    height: calc(var(--composer-vh, var(--1dvh)) * 100);
    bottom: 0;
  }

  .d-modal__container {
    max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
    height: calc(var(--composer-vh, var(--1dvh)) * 100);
  }
}

html:not(.keyboard-visible.mobile-view) {
  .d-modal__container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.d-modal {
  align-items: flex-end;

  &__container {
    // this is a hack to prevent issues on safari with transforms
    position: fixed;

    width: 100%;
    max-width: 100%;
    max-height: calc(var(--composer-vh, var(--1dvh)) * 85);
    will-change: auto;
  }

  &__header {
    padding: 0.5rem;
  }

  .ios-device & {
    &__footer {
      margin-top: auto;
    }
  }

  &__title-text {
    font-size: var(--font-up-1-rem);
  }

  // fixes modal placement on Android when keyboard is visible
  html.keyboard-visible:not(.ios-device) & {
    height: calc(100% - env(keyboard-inset-height));

    .d-modal__container {
      max-height: 100%;
      min-height: 100%;
      height: 100%;
    }
  }
}

//legacy
.modal-open #main {
  overflow: hidden;
}

.modal-middle-container {
  max-width: 100%;
  margin-bottom: 30px; // For iOS Safari issues
}

// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
.bootbox.modal {
  top: 10%;
  width: 100%;
}

.modal {
  &.fade {
    transition: opacity 0.3s linear, top 0.3s ease-out;
    top: -25%;
  }
  &.fade.in {
    top: 50%;
  }
  .modal-body {
    padding: 0.667em;
    overflow-y: scroll;

    > * {
      // adding box-sizing: border-box; to .modal-body causes iOS dropdown issues
      box-sizing: border-box;
    }
  }
}

.close {
  font-size: var(--font-up-4);
}

@media only screen and (max-device-width: 568px) {
  .flag-modal-body .flag-message {
    height: 3em;
  }
}

/* fix for tall modals */

.fixed-modal {
  .modal-middle-container {
    margin-bottom: 0;
  }
  .modal-inner-container {
    max-height: 90vh;
    overflow: auto;
  }

  &.insert-hyperlink-modal .modal-inner-container {
    overflow: visible;
  }

  html.keyboard-visible:not(.ios-device) & {
    height: calc(100% - env(keyboard-inset-height));

    .modal-inner-container {
      margin: auto;
    }
  }
}