Component: p-dialog bad drag behavior

[Algoritm211]

Describe the bug

If the user adds a margin to the p-dialog, he will have unexpected behaviour after starting to drag the dialog. When the user drags the dialog to the left - it automatically moves to the left. The reason for this bug is inside the logic of the calculation coordinates of the dialog, and we can solve it by removing margins from dialog coordinates calculation.

Current behaviour

first-1_vQ5eaKWM.mp4

Behavior after the fix

second-2_EjrfYrzf.mp4

This issue linked to the fixes for PrimeVue and PrimeReact

• fix: #4759 bad behaviour of Dialog component primereact#4760 - Prime React
• fix: fix the unexpected behavior of the ConfirmDialog popup primevue#4252 - Prive Vue

Environment

Local and production on a server

Reproducer

first-1_vQ5eaKWM.mp4

Angular version

16.2.0

PrimeNG version

16.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.17.1

Browser(s)

Safari 15, Chrome 100+

Steps to reproduce the behavior

1. Create a new Component and use the p-dialog component in a template.
2. Add a button to the template to trigger the popup appearing.
3. Add a class which adds margin ("mx-4" for example) to the p-dialog component using styleClass property.
4. Click the button to popup appears.
5. After the dialog appears try to drag it to the left.
6. The dialog moves to the right.

Expected behavior

second-2_EjrfYrzf.mp4

Users can drag dialog to the left after adding margins