html - 使用 mat-dialog 但无法正确显示

Question

这是我的页面。

当我点击心形按钮时，我会得到这个垫子对话框，但它有一些关于显示的问题。

这是我的图标代码。

<ng-container matColumnDef="Action">
              <th mat-header-cell *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let element">
                 ...
                <span>
                  <mat-icon (click)="openDialog()" svgIcon="favorite_plus"></mat-icon>
                </span>
              </td>
            </ng-container>

这是我打开 mat-dialog 的功能。

constructor(public dialog: MatDialog) { }

    openDialog(): void {
        const dialogRef = this.dialog.open(PopupAddOrdersWishListComponent, {
            height: '600px',
            width: '800px'
        });
    }

这是弹出组件的 scss 文件

.example-card-full-width {
    width: 95%;
}

.mat-radio-button~.mat-radio-button {
    margin-left: 16px;
}

.pt-5,
.py-5 {
    padding-top: 1rem !important;
}

.card-title,
.cart-table__column,
.btn {
    font-size: 14px;
}

.highlight {
    font-size: 16px;
}

.address-card__row,
.content {
    font-size: 12px;
}

.cart__checkout-button {
    width: 30%;
    margin-left: 20px;
}

@media only screen and (max-width: 980px) {
    .cart__checkout-button {
        width: 100%;
        margin-left: 0px;
    }
}

.responsive-size {
    width: 100%;
}

我尝试一一评论任何CSS，但它对我不起作用。