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

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;
}

Continue reading...