Plugin screenshots thumbnails stack vertically in Chrome 146

[alexodiy]

Hi everyone,

I noticed a fresh issue with plugin screenshot galleries - the thumbnail row below the main image stacks vertically in Chrome 146. Looks fine in Firefox and older Chrome.

Steps to Reproduce

1. Open ​https://wordpress.org/plugins/woocommerce/ in Chrome 146
2. Scroll to Screenshots
3. Thumbnails are stacked in a column instead of a horizontal row

Root Cause

The .image-gallery-thumbnail buttons use display: table-cell inside a block container with white-space: nowrap. Browsers are supposed to wrap these into anonymous table boxes so they line up horizontally - Firefox does this, Chrome did too until version 146.

Chrome 146 changed how LayoutNG generates anonymous tables for <button> elements: each button now gets its own anonymous table instead of sharing one row. So they stack vertically.

This will hit more users as Chrome 146 rolls out to stable.

Fix

A quick patch would be swapping display: table-cell for inline-block/flex. But honestly, this whole ImageGallery component is pretty dated - it still uses pre-React 17 lifecycle methods, ships ~140KB of JS just for a carousel, and doesn't even have a lightbox. Clicking a screenshot just opens the image in a new tab, which feels like 2010.

Replacing it with the Gallery block + core lightbox as proposed in #524 for #8083 would fix this and bring the screenshots section up to modern standards.

Related

#8083, #7878, #5190, #2273

Chrome 146 changed how LayoutNG handles anonymous table boxes for <button> elements, so .image-gallery-thumbnail buttons that use display: table-cell no longer share a row - they each get their own anonymous table and stack vertically.

Swapping table-cell for inline-block fixes it. The container already has white-space: nowrap so nothing else breaks.

Fixes https://meta.trac.wordpress.org/ticket/8204

[dd32]

In 14719:

Plugin Directory: Screenshots: Fix the display of the screenshot thumbnails in recent Chrome versions.

Props alexodiy.
Closes ​https://github.com/WordPress/wordpress.org/pull/560
See #8083.
Fixes #8204.