Preview in Editor: Images don't resize (not screen responsive) in Mobile view

[formosattic]

Description

It seems like a Gutenberg update may have broken the editor styles for mobile responsiveness for Images (Image block tested) while in the Editor. This is not happening in live post view, only in the Editor.

Might be related to #39373, but unlike that issue, I'm only experiencing the problem when Gutenberg is active.

Step-by-step reproduction instructions

1. Add an Image block
2. Preview > Mobile

Screenshots, screen recording, code snippet

Expected (w/out Gutenberg)	What happened (w/ Gutenberg)

Screen.Recording.2022-03-29.at.15.42.12.mov

Environment info

Test on:

• WordPress 5.9.2
• Gutenberg 12.8.1

More user reports at Automattic/wp-calypso#62064

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Azragh]

Had this behaviour since the editor switched to iframe previews. I fixed it with some CSS (backend only):

.wp-block-image.is-resized {
  max-width: 100%;
  .components-resizable-box__container {
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    img {
      height: auto;
    }
  }
}

This worked fine until now. Now I get the bug again when images are inside a .wp-block-group (wrapping disabled). The first image scales to 0 and the others overflow the container (in frontend all three scale equally).

Frontend:

Backend: