Dialog: Header slot remains visible even if empty

[joaomarcelofm]

Describe the bug

The HTML element that includes the header and close button in the dialog component remains taking full space (mainly from padding) even if both elements (text and x) are not visible. This requires the implementation to use use :pt to make the surrounding padding the same on all four sides.

I realized there's also a showHeader prop, but personally, I'd say that's also buggy because it fully removes the header (fair) but doesn't add any padding on the top. The CSS implementation is also broken as the content bleeds through on the dialog's edges, which displays overflow.

When removing the header, padding should be placed on the top.

Both bugs are in the reproduction project 👇

Reproducer

https://stackblitz.com/edit/nfeeoa?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

All

Steps to reproduce the behavior

Empty header:

1. Add a dialog
2. Remove the header text
3. Set closable prop as false
4. Inspect and see empty element

Hidden header:

1. Add a dialog
2. Set showHedaer prop as false
3. Look at top corners

Expected behavior

The padding on the top when both of the mentioned elements aren't there should be the same as on the sides and bottom.

[kisharnath]

@tugcekucukoglu if I add this p-dialog .p-dialog-content:last-of-type { border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border-top-right-radius: 12px; border-top-left-radius: 12px; } If this is fine then I want to send a PR

[NjiruClinton]

just this worked for me

.p-dialog .p-dialog-header {
  border: none;
}

but the style is not scoped