Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ndiego opened this issue Apr 16, 2024 · 3 comments
Open
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI

Comments

@ndiego
Copy link
Member

ndiego commented Apr 16, 2024

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

pattern-container.mp4
@ndiego ndiego added the [Component] Theme The frontend of the pattern directory, pattern lists UI label Apr 16, 2024
@ryelle
Copy link
Contributor

ryelle commented Apr 16, 2024

We talked about this on the call & somewhat in #635 (comment), 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).

handles.mp4

@ndiego
Copy link
Member Author

ndiego commented Apr 16, 2024

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

@ryelle
Copy link
Contributor

ryelle commented Apr 16, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme The frontend of the pattern directory, pattern lists UI
Projects
None yet
Development

No branches or pull requests

2 participants