Interface Skeleton: Limit the editor width to prevent some blocks to grow infinitely wide

[Copons]

Describe the bug

With #25884, some blocks were somehow able to exceed the editor boundaries and, when set to full width, gain a width of literally millions of pixels, making the editor unusable.

In #26552 we added a max-width: 100% to .interface-interface-skeleton__editor which seemed to fix the issue.

The fix was then removed in #26944 because not compatible with IE11.

So, again some blocks can become infinitely wide.
Empirically, this seems to happen with slideshow blocks (see for example the Slideshow block included in Jetpack).

To reproduce

Note: I'll mention Jetpack in the test steps because it's the one plugin I'm familiar with.
Users have reported that the issue affects other slideshow blocks, but they might not necessarily be openly available for testing.
Feel free to comment with details on how to test with other blocks, and I'll be happy to update these steps to include them as well.

Steps to reproduce the behavior:

1. Install and activate Jetpack.
2. Open the post editor and insert a Slideshow block. Add some images to it.
3. Open the browser's dev tools, search for .interface-interface-skeleton__editor and disable the max-width: 100% rule. That is provided by Jetpack exactly to fix this issue.
4. Set the Slideshow block at full width.
5. The block is now millions of pixel wide, basically breaking the editor.

Expected behavior

The slideshow block should have been as wide as the editor.

Screenshots

Normal Width	Full Width	Full Width (Highlighted)

Editor version (please complete the following information):

• WordPress version: 5.6 (tested up to 5.7-alpha-49774)
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Both gutenberg plugin and default.
• If the Gutenberg plugin is installed, which version is it? 9.5.1

Desktop (please complete the following information):

• OS: MacOS Big Sur 11.0.1
• Browser: Chrome
• Version: 87

Additional context

Given the original fix was removed because not compatible with IE11, let's make sure to test the new fix on IE11 as well!

[youknowriad]

cc @jasmussen in case you have an idea for a potential fix here.

[jasmussen]

Yep, thanks, we are exploring a solution in #26944 (comment).

[ambienthack]

@Copons can you please specify what version of jetpack you are using? Also, are you using TT1 or TT1-blocks (not sure if it matters)?
I have problems reproducing it. I used latest published jetpack version.
I've tried it with latest dev version of wp and gutenberg. As well as with latest published versions of wp and gutenberg.
On chrome 87 windows and mac.

[ambienthack]

Figured it out, max-width:100% is added by jetpack now.

[Copons]

@ambienthack the colors are just a different admin color scheme (you can change it in Users > Profile) 🙂

Anyway you're right: Jetpack includes the fix.

When I tested it before opening the issue, I think I was using an old Jetpack master that didn't have the fix.
I've pulled now (and also tested on the stable 9.2 version), and the fix is always included.

I'll update the repro steps to mention that we need to disable the max-width rule in the browser dev tools.

[ambienthack]

Created a PR #27646.
It fixes the regression (by putting max-width:100% back), and doesn't conflict with the previous IE11-related fix. But I was not able to test Slideshow block on IE11 because it seems Slideshow is not supported in IE11. Potentially this PR may not work for Slideshow on IE11 (were it available on IE11).

Screenshot of slideshow block on IE11 (the block on the same wp installation works in other browsers)

[ambienthack]

Edit: added screenshot
I've closed the PR, because max-width:100% doesn't fix it in Full Site Editing mode (although, it makes the situation better).

[ambienthack]

I made a small research and maybe overflow: hidden on .interface-interface-skeleton__editor can fix the problem.

[ambienthack]

Created another PR #27695

[webprom]

100% max-width works well. ie11 is deprecated anyway.