Block theme: Extra space above and below the pattern preview on mobile

[ndiego]

This is best visualized in the video below. If possible, the container should "hug" the pattern and not have a fixed height.

https://github.com/WordPress/pattern-directory/assets/4832319/466b9754-425a-4d25-87a6-761e969e6e98

[ryelle]

We talked about this on the call & somewhat in https://github.com/WordPress/pattern-directory/issues/635#issuecomment-1986101759, but it was decided that the mobile view needed to be a fixed height, we went with 600px. Then, we needed to switch to 600px height for all widths when the drag handles were introduced, otherwise they jumped around the screen while using them. So that's why the container is a fixed height.

On smaller screens we don't have the drag handles, but the height is still fixed due to how the preview code works. It is kind of tricky to get this right— since the pattern scales down, the frame should also scale down, but then we end up moving around. Here's a quick test— looks fine on small screens without the handles, since the toggle changes size right away, but it's kind of awkward to use on mid-sized screens since the content bounces with the drag handle (there's no change on large screens).

https://github.com/WordPress/pattern-directory/assets/541093/168bf417-df3b-4ef8-a93a-88c3a02597f0

[ndiego]

Yeah, I think we could finesse this in a future iteration. I just wanted to note it.

[ryelle]

Okay, I'm going to take it out of the Redesign project then.