add margin prop to Modal

[chriswhong]

After recent docs redesign work, a new fixed header is in place throughout all docs sites. The Modal component's vertical margin is not large enough to compensate for the height of the header and the top part of the modal is obscured.

This PR adds a margin prop to the Modal component. When set to large, it will add the my120 assembly class, giving enough clearance to the modal.

Before

After

[tristen]

Suggested change

	`relative ${marginClass} ${widthClass} bg-white round`,
	`fixed hmax-viewport-11/12 ${widthClass} bg-white round`,

@chriswhong what do you think about using fixed instead and also adding the following CSS to the element itself.

style: {
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)'
}

That should center the modal and let us avoid adding fixed margins to begin with.

[chriswhong]

I lean towards modals opening near the top of the screen as a sensible default. This component could be used for content that is taller than the viewport, and the proposed change would cut off the top and bottom in that situation. (maybe for that much content we should not use a modal, but it's a footgun we should consider.)

[tristen]

This component could be used for content that is taller than the viewport

Oh! That was the intention of adding hmax-viewport-11/12 so the modal is always shown but we would favor using an overflow scroll for content that extends beyond the viewport.

[tristen]

I lean towards modals opening near the top of the screen as a sensible default

That makes sense to me. Should we use a smaller percentage for top? My concern with adding a fixed margin-top option is that we'll want to add more over time to cover other scenarios and it will be hard to crawl out of that mess if we ever introduce breaking changes. Personally, I think adding a fixed top margin value - to begin with - was a mistake that I'm guilty of keeping around after the major changes in v2

[tristen]

Approving to unblock as the implementation looks 👌