Refactor modal layout

[jameskoster]

The Modal component currently applies a fixed height to the header element.

gutenberg/packages/components/src/modal/style.scss

Line 73 in 2247c3a

height: $header-height + $grid-unit-20;

One drawback to this is that more complex modal layouts (such as the pattern explorer) absolutely position elements within which makes them fragile if that fixed height is ever updated in the underlying modal component.

Another issue is that the header is unable to grow in order to accommodate long titles.

Finally it means we have to apply additional padding to the top of the modal content so that it doesn't get obscured 'beneath' the header.

It would be better to avoid absolutely positioning the modal header if possible.

[ciampo]

Thank you for opening this issue! Just wanted to add that we didn't necessarily discuss rewriting the Modal component's header — we mainly discussed refactoring specific modals that internally use the Modal component:

• the block pattern inserter/explorer modal (details)
• the block pattern setup modal (details)

The idea is that both modals listed above assume a hardcoded height for the Modals header — they should, instead, be refactored employing layouts and techniques that work regardless of the Modal's header height.

Separately from refactoring the code in these 2 modals, we could also look at the Modal component itself and see if we can make the header grow to accomodate longer text without causing breaking changes.

[annezazu]

Can this be closed out with your PR updating the design and this related design issue? #39308

[jameskoster]

I think this is separate. It's more about the underlying component while the referenced issue is just about the use of the component in specific use cases.

It may be that this one gets closed as/when we work on 39308, but it's a smaller part that could also be worked on in isolation before-hand.