fix(Dialog)!: Prevent a focus indicator from being cut off

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

This addresses #1828. It moves padding from Dialog down to its header, body and footer sections.

Why

To prevent focus indicators at the edge of the body to become cut off. This could happen because the body is a scroll container without any padding. The browser creates a new block formatting context for it, and it can’t draw anything outside of that.

How

n/a

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• Header and footer now have zero bottom and top padding – this white space is managed by the gap of the Dialog. It uses component space, while padding uses grid space, and I didn’t want to change that now.

[RubenSibon]

It uses component space, while padding uses grid space, and I didn’t want to change that now.

Is it worth the wait for the release of correct spacing tokens?

[VincentSmedinga]

Is it worth the wait for the release of correct spacing tokens?

The space tokens are currently correct as well. And if we change them, we’ll come across the Dialog layout. So, no, let’s not wait.

[dlnr]

This solves the overflow bug and I don't think it's breaking anything either.