Image layout being reformatted in hidden blocks

Bug
1

Hey, long-time moderator on a discourse forum and love the platform. However, in a recent update it seems like the formatting has changed for hidden blocks and it’s messed up a “tier list” which I manage on our forum.

Let me demonstrate…
(EDIT: As a new user here I can only add one image in a post so cannot demonstrate, posting this anyway and if someone can demonstrate below that would be excellent Otherwise, you can view the issue here: 🏆 Neo Monsters tier list (see first post) 🏆 - #2 by Killerdog - Neo Monsters Guides and Tutorials - ZigZaGame Forum)

Abyssoldier Antistan
Abyssoldier Antistan125×128 33.7 KB
[image 2] [image 3] [image 4] [image 5]

^ Here they are in a nice horizontal line

S tier

In here I embedded the same images

^ Here they appear in a vertical line

During editing, the preview displays them as horizontal but a few seconds after I save the edit on the post it flips them into vertical.

This seems like a bug to me, since the formatting is inconsistent and it never used to work this way.

2

Hi, welcome to meta! :wave: :smile:

I think your issue is that the lightbox is being applied to your images, making them use the full width. I’m pretty sure it would not apply to images that small before, so that may be your reason. Also, I looked at the CSS, and there were no recent changes on the [details] tag. :thinking:

Long story short: here is some CSS that you can add to your theme or a new theme component:

.cooked details[open] .lightbox-wrapper {
    display: inline-block;
}

Then, you should get what you want:

The image shows a section labeled "Mythics" with seven character avatars labeled S+. (Captioned by AI)
The image shows a section labeled "Mythics" with seven character avatars labeled S+. (Captioned by AI)656×262 50 KB

As a side note, I think the image should be inline in [details]. That’s the default behavior outside that tag, and it would give the user the choice inline/block. :thinking:

EDIT: As Moin found out, that the lightbox is applied to small images is related to:

2 Likes
3

Thanks very much @Moin for tracking it down to lightbox applying to smaller images than before. I’ll contact our forum admin and try to get them to alter the theme / theme component with the CSS suggestion.

2 Likes
5

@Arkshine Thanks again, the fix worked!

2 Likes