Broken style of prime-ng paginator dropdown that is inside dialog when paginatorDropdownAppendTo="body"

[vokic]

Describe the bug

When appending a paginator of a p-table that is inside a dialog, using paginatorDropdownAppendTo="body", the dropdown of the paginator is not the same style as before

Before appending it to body:

After adding paginatorDropdownAppendTo="body":

Environment

Windows 10, Node: 18.16.1 Primeng: 16.7.1, Angular: 16.2.0, npm 9.8.0, VS Code 1.84.2

Reproducer

No response

Angular version

16.2.0

PrimeNG version

16.7.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.1

Browser(s)

No response

Steps to reproduce the behavior

1. Create a table with paginator inside a dialog pop up
2. Select paginator dropdown → the menu is "under" the border
3. add paginatorDropdownAppendTo="body" to the table
4. Select paginator dropdown → the menu is "over" the border but it is narrow

Also when I try to manually edit padding or margin, using css, I cannot do it when it is appended to body. When I remove it, the styles apply:

 :host ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  margin: 0.75rem !important;
  padding: 0.75rem !important;
} 

Expected behavior

The dropdown menu is expected to be the same width as when it is not appended to body.

[digeomel]

Having a similar issue here with 16.8.0 as well. And it doesn't matter whether you have paginatorDropdownAppendTo="body" or not, the issue remains.

[digeomel]

The problem seems to be caused by this class:

https://github.com/primefaces/primeng/blob/16.8.0/src/app/components/dropdown/dropdown.css#L45

But I see that on master it is already removed.

As a temporary workaround, I've set this class globally to override the one coming from PrimeNg:

.p-dropdown-panel {
    position: unset;
    top: unset;
    left: unset;
}

[puranjayjain]

the problem still persists

[himinat]

just updated from v16 to v17, the problem still persists...