[wp-meta] [Making WordPress.org] #8204: Plugin screenshots thumbnails stack vertically in Chrome 146

[Making WordPress.org]

#8204: Plugin screenshots thumbnails stack vertically in Chrome 146
------------------------------+-------------------------
 Reporter:  alexodiy          |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:
Component:  Plugin Directory  |   Keywords:  needs-patch
------------------------------+-------------------------
 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

 [[Image(https://i.imgur.com/vX566sB.png)]]

 == 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

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8204>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org