bug(modals): Fix Modal padding so Backdrop is clickable on the top edge (#41882)
Update `<Modal>` dialogs so that user can click above the modal to
dismiss it; this is in addition to clicking the Backdrop on the
left/right/bottom sides.
| | Note | Img |
| --- | --- | --- |
| Before | The padding extended 80px to the top of the modal, which
positioned things but also captured clicks. Clicking on any of the green
areas would not close the modal | <img width="797" alt="before"
src="https://user-images.githubusercontent.com/187460/204704879-c87f401d-efff-4c77-9944-eb329b02d8d5.png">
|
| After | The padding extends the same amount on top/bottom, margin is
used to maintain position. Clicking outside of the green area will
dismiss the modal (clicks in the orange will dismiss the modal). | <img
width="794" alt="after"
src="https://user-images.githubusercontent.com/187460/204704881-61992ee8-99d4-48c2-a766-832b67dd6162.png">
|
NB: I went with `margin-top` because `top` itself wasn't working. The
parent node, `<Container>`, is `position: fixed` but the `<Dialog>`
itself isn't positioned. I thought that kind of change is more invasive
and could create collateral issues.
Looks like the `padding: 80px` went in during
https://github.com/getsentry/sentry/pull/25768, I can't tell if it was
done for any reason other than alignment.