Image: Fit the lightbox overlay to the visible screen on iOS Safari - #84739

What?

Part of #84699

Sizes the image lightbox overlay to the area the browser actually lays fixed content out in, instead of hardcoding 100vh. On iOS Safari that area is shorter than 100vh, so the overlay used to overflow the visible screen. Also measures the overlay in view.js so the zoom still starts from the thumbnail.

Why?

On iOS Safari the lightbox had two visible problems, both from one root cause — .wp-lightbox-overlay was height: 100vh, taller than the area Safari lays fixed content out in:

• The overlay didn't cover the whole visible screen, so page content poked through near the browser chrome (post title at the top, a strip at the bottom).
• The enlarged image wasn't vertically centered — it sat low, because the image containers center with top: 50% inside a box that ran past the screen bottom.

How?

• .wp-lightbox-overlay uses inset: 0 instead of width: 100%; height: 100vh, so it matches the area the browser lays fixed content out in, and the image containers' top: 50% centers on the visible screen.
• setOverlayStyles() in view.js measures the overlay and sizes the image against its height instead of window.innerHeight. It passes the height to CSS as --wp--lightbox-overlay-height, which replaces -50vh in the zoom keyframes so the zoom still starts from the thumbnail.
• A new e2e test insets the overlay to stand in for Safari's shorter fixed area, since Chromium can't reproduce the toolbars. It checks that the zoom starts on the thumbnail, that the overlay is inset to that area instead of staying 100vh, and that the image is centered.

Testing Instructions

1. Create a post with a Gallery block and enable "Expand on click".
2. View the post in Safari on an iPhone (iOS 26) and tap an image to open the lightbox.
3. Check that no page content shows behind the status bar or the browser toolbars, that the image is vertically centered on the visible screen, and that the previous/next buttons are visible.
4. On desktop, check that the lightbox opens, zooms, navigates and closes as before.

Testing Instructions for Keyboard

1. Tab to an image's "Enlarge" button and press Enter to open the lightbox.
2. Use the Left and Right arrow keys to move between gallery images, and Tab to move between the lightbox buttons.
3. Press Escape to close the lightbox.

Screenshots or screencast

Before	After

Use of AI Tools

Assisted by Claude Code, all changes tested & reviewed manually.