левая сторона MatDialog отображается внутри боковой панели, как я могу показать диалог на боковой панели

Question

Я реализовал MatDialog, используя Angular Материал. Когда я открываю Dialog, левая часть его скрывается внутри меню боковой панели.

код в DashboardComponent

function lastSeenDevice(content) {
  
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '80%',
    height:'80%',
    position: 'relative',
    data: { name: this.name, animal: this.city }
  });
}

код в MyDialogComponent

<div md-dialog-content>
     <button class="close" mat-button (click)="onNoClick()">
        <mat-icon>close</mat-icon>
    </button>
    
    <p>What's your favorite city?</p>
    <mat-form-field>
        <mat-label>Favorite City</mat-label>
        <input matInput [(ngModel)]="data.city">
    </mat-form-field>
</div>
<div mat-dialog-actions>
    <button id="matbuttonClose" mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Это как выглядит мой диалог. Как это исправить?

введите описание изображения здесь