Why doesn't my modal dialogue cover the page in my Angular component?

I have an Angular web application that has a page that needs to be interrupted by a modal dialogue in some situations. However, when I press the button that does that, the modal appears at the bottom of the page, not covering it as I want it to.

This particular page is a logout form. We have a few different flavors, and some of those flavors need to give our users more information via a modal dialogue when they sign out.

<main>
  <p class="question-header">Did you do the thing before signing out?</p>

  <button class="btn btn-lg btn-success w-100" (click)="logout(1)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    Yes
  </button>
  <button class="btn btn-lg btn-primary w-100" (click)="logout(-1)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    N/A
  </button>
  <hr class="my-3"> <!-- This separator is here so our users don't press "No" by mistake. -->
  <button class="btn btn-lg btn-danger w-100" (click)="logout(0)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    No
  </button>
  <!-- Trigger Button (this will eventually replace the button above, but is here for testing.) -->
  <button class="btn btn-primary" (click)="openModal(template)">Open Modal</button>

  <!-- Modal Template -->
  <ng-template #template>
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Overlay Modal</h4>
        </div>
        <div class="modal-body">
          This modal should cover the page content.
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" (click)="modalRef?.hide()">OK</button>
        </div>
      </div>
    </div>
  </ng-template>
</main>

Here is my .scss file for this component.

@import '../../../../../../variables.scss';

.question-header {
  font-weight: 300;
  font-size: $h2-font-size;
  padding: 0.5em;
  margin: 0;
}
.question-part-two {
  font-weight: 300;
  font-size: $h4-font-size;
  padding: 0.5em;
  margin: 0;
}
::ng-deep .modal-dialog {
  max-width: 500px;
  margin: 1.75rem auto;
}

::ng-deep .modal-content {
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  padding: 1rem;
}

::ng-deep .modal-header {
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::ng-deep .modal-footer {
  border-top: none;
  display: flex;
  justify-content: flex-end;
}