Limited Global Styles: Fix modal layout

[mmtr]

Fixes #76089

Proposed Changes

As of Gutenberg 15.2, the Modal component no longer renders the passed React nodes as direct children of .components-modal__content, effectively breaking the flex layout used by our Limited Global Styles gating modal.

To fix that, we now use a wrapper with a custom class so we can build a flex layout without relying on how Gutenberg renders the Modal component.

Before	After

Testing Instructions

• Apply these changes to your sandbox
• Create a new site and sandbox it
• Go to the site editor and open the styles sidebar
• Make sure the modal has the proper layout

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-65075

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-65075&env=jetpack

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit fix/limit-global-styles-modal on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[BogdanUngureanu]

Works as expected on desktop. There're some small issues on mobile resolutions (probably there were happening before too).

Notice the scrollbar and the line that cuts the close button.

[dsas]

On the vertical phone screenshot should we display the actionable 'half' of the modal above the illustrative half?

[mmtr]

Thanks @BogdanUngureanu, it should be fixed now:

should we display the actionable 'half' of the modal above the illustrative half?

It's intentionally below the image so it looks similar to the Core's welcome modal:

[BogdanUngureanu]

Thanks for the updates, Miguel. I had another look and I've noticed that the scrollbar is still appearing for iPhone 12 pro resolutions.

Maybe for low height resolutions we could:

• Reduce the padding for wpcom-global-styles-modal__text
• Remove the margin-top: auto on wpcom-global-styles-modal__actions class, this will move the CTA buttons in the visible screen.

By doing this, we will make sure that the CTA buttons are visible on the screen without scrolling.

[mmtr]

the scrollbar is still appearing for iPhone 12 pro resolutions.

I cannot reproduce that, maybe you had some caching issues? This is how I see it:

Gutenberg 15.7.0-rc.1	Gutenberg 15.6.2

[BogdanUngureanu]

Oh, sorry about that. The issue is in landscape mode, where the height is small and you have to scroll the modal in order to see the upgrade buttons.

[mmtr]

Thanks for the extra info. It should be fixed now:

[BogdanUngureanu]

Works great on most mobile devices, in landscape mode. I've noticed that for Galaxy Fold, in landscape mode, the buttons are still not visible, but I guess it's an acceptable tradeoff.