I have a mat dialog that does resize responsively but doesn't resize on window zoom level change. If you look at the attached photos I have users that use different zoom levels on their browser causing many visibility issues.
Zoom level 90% works perfectly as you can see from the first photo. Zoom 100% and 125% and higher and we have problems.
Here is my code to open the dialog. I have tried many things in the console to change the height but nothing works
openDialog(model: BillingModel, title: string, formMode: string): void {
let dialogRef = this.dialog.open(BillingModalComponent, {
maxWidth: '96vw',
minWidth: '25vw',
width: '85vw',
minHeight: '50vh',
height: 'auto',
hasBackdrop: true,
backdropClass: 'bdrop',
disableClose: true,
panelClass: ['md:w-3/5', 'w-full'],
autoFocus: false,
data: {
title: title,
model: model,
mode: formMode,
vendorList: this.vendorList,
},
});