fix(modal): add padding-inline-end to prevent title overlapping close button - #8586

Thanks for taking a look! The issue is actually with the close button overlapping the content below. And looks like the issue is due to different implementations in our HTML/CSS modal component and our react modal component.

In the screenshots below, I've drawn a red outline around the header element and the close button.

Here is the HTML/CSS modal - looks OK. Close button is within the header, and aligns with the title text.

Here is the react modal. You can see the close button is outside of the header and not aligned with the title text.

And this is the react scrolling modal.

The difference is that the HTML/CSS component wraps the header contents in .pf-v6-c-modal-box__header-main which provides top padding of 8px, and the react component does not. That extra 8px pushes the header contents (title) down a little more and aligns it next to the close button better.

Ideally we would update the react component to add .pf-v6-c-modal-box__header-main inside of the header, wrapping the title, but we can't do that since that class is display: flex. Since users can pass whatever they want as the contents of the modal header, if they passed 2 or 3 elements as children, those would no longer display as they do naturally and would display as flex children instead. And that could be a breaking change for users.

Instead, we could update --#{$modal-box}__header-main--PaddingBlockStart to "0", and update --#{$modal-box}__header--PaddingBlockStart to calc(var(--pf-t--global--spacer--lg) + var(--pf-t--global--spacer--control--vertical--plain)) - effectively taking the padding off of .pf-v6-c-modal-box__header-main and adding it to .pf-v6-c-modal-box__header.