bug(DIALOG): draggable and resizeable mat-dialog in Angular 16

[harishcn2]

Description

I am using Angular version 16 along with Angular Material version 16. In my application, I have implemented a dialog component along with both dragging and resizing functionality. While I have successfully enabled dragging within the screen (viewport) and resizing functionality, I am facing an issue when the dialog is dragged to the top-left corner. In this scenario, resizing the dialog causes it to move outside the viewport, which is not the expected behavior.
Expected Behavior:
When the dialog is dragged to the top-left corner, resizing should not cause it to move outside the visible area of the screen. Instead, it should resize towards the bottom and right directions while remaining fully within the viewport.

This is the Angular 8 referance
https://stackoverflow.com/questions/58606128/draggable-and-resizeable-mat-dialog-in-angular-8

Here is angular 16
https://angular-lhvwndmb.stackblitz.io

Reproduction

StackBlitz link: https://angular-lhvwndmb.stackblitz.io
https://stackblitz.com/edit/angular-jszctmpc?file=package.json (angular 8)

Steps to reproduce:

1. Open the dialog.
2. Resize the dialog to its minimum height and width.
3. Drag the dialog to the top-left corner of the screen.
4. Attempt to resize the dialog to its maximum height and width.
5. Notice that the dialog moves out of the visible area. Since dragging is only enabled via the header/title bar, and that portion goes off-screen, it becomes impossible to drag the dialog back down.

Expected Behavior

Expected Behavior:
When the dialog is dragged to the top-left corner, resizing should not cause it to move outside the visible area of the screen. Instead, it should resize towards the bottom and right directions while remaining fully within the viewport.

Actual Behavior

Actual Behavior:
When the dialog is dragged to the top-left corner, resizing dialog move outside the visible area of the screen.

Environment

• Angular: 16.2.6
• CDK/Material:16.2.5
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macos, windows

[crisbeto]

There's an example of a draggable dialog here: https://material.angular.dev/cdk/drag-drop/overview#alternate-drag-root-element. We don't have the ability to make it resizable yet.