Overflowing featured image in query block in tablet and mobile mode

[karlemilnikka]

Description

Featured images in the query block are neither contained nor scaled (like in desktop mode) in the block editor. The images overflow and overlap due to being rendered full size.

Steps to reproduce

1. Install a fresh WordPress site with GeneratePress or Astra as the theme.
2. Install GenerateBlocks 2.0 beta 3 and GenerateBlocks Pro 2.0 beta 3.
3. Add two posts with a featured image (e.g. 1920 px in width).
4. Create a new page, insert the query block, choose ”two columns & featured image” as the layout to start with.
5. Switch to tablet view or mobile view.

Actual behavior

The images are neither contained nor scaled like in desktop mode. The issue only affects the block editor (not the frontend).

Expected behavior

The images should behave like in desktop mode and on the frontend.

---

References

generatepress_query_image_bug.mp4

[karlemilnikka]

Accidentally posted in the GeneratePress repo instead of the GenerateBlocks repo. See tomusborne/generateblocks#1580.