`mat-calendar` design not looking good when used in `mat-dialog`

Question

In my angular 16 app i have used angular material. I want to display mat-calendar inside a modal popup dialog so i create a component and added mat-calendar inside it and load that component using mat-dialog but design of mat-calendar is not showing as expected. here i am attaching the screenshot of displaying calendar.

Here is code of my main component to open dialog

openDateTimePicker(): void {
  const dialogRef = this.dialog.open(DateTimePickerComponent, {
    data: {},
  });

  // tslint:disable-next-line:no-any
  dialogRef.afterClosed().subscribe((data: any) => {
    if (data) {
    }
  });
}

And here is html code of DateTimePicker Component

<mat-calendar></mat-calendar>

I tried to find solution on angular material website and stackblitz but can't find similar examples.

Answer 1

Solved this by setting up width of dialog component

const dialogRef = this.dialog.open(DateTimePickerComponent, {
  data: {},
  width: '320px',
});