Lightbox: The right position of the close button is incorrect on Windows OS

[t-hamano]

Description

On Windows OS, when opening Lightbox with a document that has a scroll bar, the right position of the close button is incorrect.

The button position should be 16px from the right edge as defined by this CSS.

However, the width of the overlay, which is the reference for the position of the close button, is 100vw, so the width includes the scrollbar.

As a result, the close button's right position no longer takes into account the width of the scrollbar.

I tried CSS like below to solve this problem:

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 2b8631fffe..9926cf0b4e 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -215,7 +215,7 @@
        left: 0;
        z-index: 100000;
        overflow: hidden;
-       width: 100vw;
+       right: 0;
        height: 100vh;
        box-sizing: border-box;
        visibility: hidden;

If you apply right: 0, the overlay width will fit inside the scrollbar. However, when the lightbox is closed, there is a slight unnatural shift, so a different approach is needed.

d0715020d00d72340f54b784deb01278.mp4

Step-by-step reproduction instructions

Note: This problem would only be reproducible on Windows OS where the browser scrollbars have a physical width.

• Insert a Image Block and add an image.
• Enable "Expand on click"
• Show the post.
• Click the image.
• Focus on the button.
• The focus outline should be almost adjacent to the browser scrollbar.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.4.1
• Gutenberg latest trunk (Can be reproduced even if disabled)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes