Update the viewport width of the vertical header

[carolinan]

Description
In the header and pattern previews in the Site Editor, the vertical header is very small.
The CSS transform that is used on the pattern preview also animates the pattern which makes it look like it moves from the top to bottom.

This pull request adds a viewport width to the vertical header pattern, which makes the preview zoom in on the design closer.
It also reduces the impact of the animation.

Screenshots
In these videos I am refreshing the Patterns data view screen in the Site Editor.

Before:

vertical-header.mp4

After:

vertical-header-after.mp4

Testing Instructions
Go to Appearance > Editor > Patterns > Headers
Confirm that the vertical header is more visible than before.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

Note: the vertical header template part still shows the small pattern preview.

[juanfra]

I've tried following the steps described and I couldn't get it working.

Screen.Recording.2024-10-15.at.11.17.20.mov

Not sure if I missed any step?

[carolinan]

Select the header pattern, not the parts. The parts are not using the viewport widths, those are the HTML files.

[carolinan]

WordPress/gutenberg#66111

[juanfra]

Thanks for the clarification, I see the changes now. Works well.

Screen.Recording.2024-10-15.at.11.36.35.mov