Fix modal header overlapping the border

[johngodley]

A change in #9900 has made the heading in a modal overlap with the top border:

This is only visible on a small screen.

This PR tweaks the top offset, pushing it down by the border width:

It fixes the small screen problem and doesn't appear to negatively affect a desktop screen (although this could be tweaked further)

How has this been tested?

Set display to a small screen and open the keyboard shortcuts modal. Verify the heading overlaps and that the PR fixes the overlap.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[jasmussen]

This is actually a rounding error by the browser, which positions vertically using translate and therefore can place the modal on subpixels if the viewport width is an uneven number.

To put it differently, the position is actually correct in master, but due to the subpixel blurring, there's that little bit of overlap. When you push it down like in this branch, you can see the text underneath as you scroll:

I pushed a fix that I believe improves this. Expanding review range for a sanity check for both of us.

[johngodley]

I pushed a fix that I believe improves this

👍 Looks good in my testing

[johngodley]

I can no longer reproduce the original problem so this seems to have got fixed. Closing