Scope breakpoint media queries to screen so printing does not look like a resize

[Mamaduka]

What?

PR fixes an unusual bug that I discovered by accident. Printing currently closes and reopens the editor's complementary area. Scoping breakpoint media queries to screen prevents the print pass from being interpreted as a switch to a mobile viewport.

Why?

Opening the browser print dialog re-evaluates the width media features against the page box rather than the window. Letter or A4 minus default margins is roughly 720 to 740 CSS px, which is under the 782px medium breakpoint, so (max-width: 782px) flips to true and back. window.innerWidth never changes and no resize event fires, so nothing else signals that anything happened.

Both breakpoint query builders omit the media type, so they match paged media too. That means printing runs the editor's big-to-small path. useAdjustComplementaryListener sees isSmall become true, calls disableComplementaryArea, then reopens the area afterward. Printing mutates the editor state, and the reopen animation is the visible symptom. Anything else keyed on viewport matching gets the same spurious event.

How?

Build the queries as screen and (min-width: Npx) in both places where they are generated. @wordpress/viewport's listener is the one that closed the sidebar, since isSmall reads from that store. useViewportMatch has the same flaw and the same fix.

Testing Instructions

1. Open the post editor with the Settings sidebar open.
2. Open the browser print dialog.
3. The sidebar shouldn't re-animate in the background.
4. Resize the window across 782px in both directions. The sidebar should still close on the way down and reopen on the way up, as before.

Screenshots or screencast

CleanShot.2026-08-09.at.17.53.32.mp4

Use of AI Tools

Assisted by Claude.

[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: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

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

[github-actions]

Size Change: +13 B (0%)

Total Size: 7.82 MB

📦 View Changed

Filename	Size	Change
build/scripts/compose/index.min.js	11.7 kB	+6 B (+0.05%)
build/scripts/viewport/index.min.js	1.25 kB	+7 B (+0.56%)

_{compressed-size-action}

[ramonjd]

No sidebar jumping now

Before

Kapture.2026-08-10.at.08.45.39.mp4

After

Kapture.2026-08-10.at.08.47.08.mp4

[Mamaduka]

Thanks for the reviews, folks!