angular material dialog is not responsive

you can try by adding margin: 0 auto; to your dialog setting:

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  margin: '0 auto',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config
};

I was using low utility classes in my case (tailwind), here's the solution I found:

let dialogRef = this.dialog.open(LiveEventModalComponent, {
  panelClass: ['md:w-3/5', 'w-full'],
  maxHeight: '85vh',
  data: {},
});

To achieve responsiveness, we can use panelClass in MatDialogconfig

Add the following in global style

.dialog-responsive {
    width: 40%;
}

@media only screen and (max-width: 760px) {
    .dialog-responsive {
        width: 100%;
    }
}

And include this class in your config where you want to open dialog

   let config: MatDialogConfig = {
      panelClass: "dialog-responsive"
    }
    let dialogRef = this.dialog.open(InviteStudentComponent, config);