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

Contribute Bug
,

AI-generated summary

The discussion revolves around an issue with lightboxed images not having the vertical-align property set, causing misalignment with non-lightboxed images. Obskyr reported the issue, providing reproducible steps and screenshots. They proposed a simple fix: adding vertical-align: middle to .lightbox-wrapper. awesomerobot confirmed the fix and applied it in a GitHub pull request, which will be available in future Discourse updates. Obskyr expressed gratitude for the quick resolution.

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.