I have this angular materials dialog which I’m using as a container for one of my forms. I cannot figure out what I need to change in the css to get the form to fill the whole height of the modal.

Code to open the modal from the parent component

  openModal(){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '1800px';
    dialogConfig.height = '756px';
    dialogConfig.backdropClass = 'popupBackdropClass';
    dialogConfig.disableClose = true;
    const dialogRef = this.dialog.open(AddMessageFormComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(result => {
      console.log('dialog closed');
      if (result !== undefined){
        // do something with the result
        console.log(result);
        this.addMessage(result);
      }
    })
  }

template for add-message component

<mat-dialog-content>
<div [formGroup]="addMessageForm">

  <div class="col-md-12">
    <mat-form-field appearance="outline" class="form-field" style="width: 100%;">
      <mat-label for="message-text">Message Text:</mat-label>
      <input matInput id="message-text" formControlName="messageText">
  </mat-form-field>
  </div>


  <div class="col-md-12">
    <mat-form-field appearance="outline" class="form-field" style="width: 100%;">
      <mat-label for="developer-note">Developer Note:</mat-label>
      <input matInput id="developer-note" formControlName="developerNote">
  </mat-form-field>
  </div>

  <div>
    <mat-form-field appearance="outline" class="form-field">
      <mat-label for="expiry-date">Expiry Date:</mat-label>
      <input matInput [matDatepicker]="picker" formControlName="expiry">
      <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
      <mat-datepicker-toggle matIconSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
      </mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>      
  </mat-form-field>
  </div>


  <div>
    <mat-form-field appearance="outline" class="form-field">
      <mat-label for="date-added">Date Created:</mat-label>
      <input matInput [matDatepicker]="picker1" formControlName="dateAdded">
      <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
      <mat-datepicker-toggle matIconSuffix [for]="picker1">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
      </mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>      
  </mat-form-field>
  </div>

  <div>
    <mat-form-field appearance="outline" class="form-field" disabled="true">
      <mat-label for="author">Author:</mat-label>
      <input matInput id="author" formControlName="author" [disabled]="true">
  </mat-form-field>
  </div>

  <div>
    <mat-form-field>
      <mat-label>Applications</mat-label>
      <mat-select formControlName="applications" multiple>
        @for (application of applications; track application) {
          <mat-option [value]="application">{{application}}</mat-option>
        }
      </mat-select>
    </mat-form-field>
  </div>

  <div>
    <mat-form-field>
      <mat-label>Status</mat-label>
      <mat-select formControlName="status">
        
          <mat-option value='ACTIVE'>ACTIVE</mat-option>
          <mat-option value='EXPIRED'>EXPIRED</mat-option>
        
      </mat-select>
    </mat-form-field>
  </div>
  

      
    </div>
</mat-dialog-content>
<mat-dialog-actions>
    <!-- <button mat-button mat-dialog-close>Cancel</button> -->
    <button type="button" class="btn btn-secondary" mat-dialog-close>Cancel</button>
    <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
    <button type="button" class="btn btn-primary" [mat-dialog-close]="addMessageForm" [disabled]='addMessageForm.status !== "VALID"'>Submit</button>
    <!-- <button mat-button [mat-dialog-close]="addMessageForm" [disabled]='addMessageForm.status !== "VALID"'>Submit</button> -->
</mat-dialog-actions>

and css

.btn-secondary {margin-right: 0.5%;
                margin-left:0.5%;}
.btn{ float: right;}

.mat-form-field {width: 100%;}

What do I need to add into the css to ensure that the content from my component fills 100% of the height of the angular materials dialog?