I have created this component that will be invoked with @angular/cdk/dialog:

@Component({
  selector: 'example-cdk-dialog',
  template: `
    <div class="flex flex-col -sm:w-full rounded-md bg-white">
      <div class="flex justify-end items-center sm:hidden">
        <h5 class="mr-auto">Hi {{ data.name }}!</h5>
        <button (click)="dialogRef.close()">Cancel</button>
        <button (click)="dialogRef.close(data.animal)">OK</button>
      </div>
      <label for="favorite-animal">What's your favorite animal?</label>
      <input
        id="favorite-animal"
        [(ngModel)]="data.animal"
        placeholder="Enter your name"
      />
      <div class="hidden sm:flex justify-between">
        <button (click)="dialogRef.close()">Cancel</button>
        <button (click)="dialogRef.close(data.animal)">OK</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [FormsModule],
})
export class ExampleCdkDialogComponent {
  private position = {
    bottom: this.overlay.position().global().bottom('0').centerHorizontally(),
    center: this.overlay.position().global().centerVertically().centerHorizontally(),
  };

  constructor(
    public dialogRef: DialogRef<string>,
    @Inject(DIALOG_DATA) public data: { name: string; animal: string },
    private overlay: Overlay,
    private readonly viewportRuler: ViewportRuler
  ) {
    // update position immediately before dialog is rendered.
    this.updatePosition();

    viewportRuler
      .change(200)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.updatePosition());
  }

  private updatePosition() {
    const { width } = this.viewportRuler.getViewportSize();
    if (width <= 375) {
      this.dialogRef.overlayRef.updatePositionStrategy(this.position.bottom);
    } else {
      this.dialogRef.overlayRef.updatePositionStrategy(this.position.center);
    }
  }
}

(Note that I am using Tailwind)

this is opened successfully with:

this.dialog.open<string>(ExampleCdkDialogComponent, {
      // width: '250px',
      data: { name: this.name, animal: this.animal },
      closeOnNavigation: true,
      disableClose: true,
      // Make sure these classes are added to tailwind.config `saeflist` so they don't get purged.
      panelClass: ['-sm:w-full'],
    });

Because of the 200ms throttle from viewportRuler.change(200), the behavior of the dialog is that it’s width will snap imediately to 100% on sm breakpoint, and the change of position to bottom is delayed. I have tried adding transition-all duration-0 delay-200 which did add the correct CSS code, but apparently the width does not do the transition. i noticed also that width transitions only take effect when you have explicitly set a value for your “before” and “after”. How do I make sure that the width changes at the same time the position changes here?