Lightboxed images do not have `vertical-align` set, misaligning them with naked `img`s

Bug
,
1

Priority/Severity: Low.
Platform: Confirmed in Firefox 127.0 on Windows 10 and Chrome 125.0.6422.165 on Android 14.
Description: See below.
Reproducible steps: Place two images, one with a resolution of above 690×500 pixels (in either dimension) and one with a resolution below, on the same line.

Expected behavior

Lightboxed images and naked imgs should be treated the same way by CSS, bar all the extra bells and whistles of a lightbox.

The issue

Discourse’s built-in CSS has vertical-align: middle set for img, but not for .lightbox-wrapper, resulting in lightboxed and non-lightboxed images on the same line being out of alignment and taking up unnecessary vertical space:

557×1169 463 KB
678×811 395 KB
336×456 39.1 KB
771×900 324 KB
145×222 38 KB

The solution

The fix is simple: Add vertical-align: middle to .lightbox-wrapper as well.

4 Likes
Image lightboxing does not respect manual resizing or [grid] tags
2

Thanks for the detailed report! A fix has been applied here:

https://github.com/discourse/discourse/pull/27520

and will be available in Discourse updates soon

4 Likes
3

Wonderful! Thanks a bundle and a half! :blush:

1 Like
4

This topic was automatically closed after 3 days. New replies are no longer allowed.