Product Gallery block > Pop-Up: Fix overlay sizing issue

[thealexandrelara]

Changes proposed in this Pull Request:

This PR fixes an issue when you visit a product with a single image and open the Product Gallery Pop-Up. Depending on the size of the image, if it does not fill the entire screen, it can cause the background to be an incorrect color and the close button to appear in the middle of the screen.

Closes #43826 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Navigate to Single Product template (Appearance > Editor > Templates > Single Product template).
2. Click on "Edit" to open the Template editor.
3. In the editor, you should see a block inserter icon or an option to "Add Block." Click on it.
4. In the block inserter, search for "Product Gallery" or browse through the available blocks until you find it.
5. Click on the "Product Gallery" block to add it to your content.
6. Visit a product with a single image.
7. Click on the large image to open the Product Gallery Pop-Up;
8. Make sure the close button appears correctly positioned to the top right of the screen, the background color of the pop-up is white, and you can navigate between the images without any issue;
9. Close the pop-up and visit a product with multiple images.
10. Make sure the close button appears correctly positioned to the top right of the screen, the background color of the pop-up is white, and you can navigate between the images without any issue;

Before	After

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Fix overlay sizing issue with the Product Gallery Pop-Up.

Comment

[github-actions]

Hi @kmanijak,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 713606e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	257	0	0	57	0	314	5m 28s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[kmanijak]

Nice work, I didn't spot any issues! 🚀