Display issue in the "hide details" element

[Canapin (Coin-coin le Canapin)]

In this block,

[details="Summary"]
This text will be hidden
[/details]

There’s two CSS rules that makes display: block on every child or sibling elements:

details[open]>*, details[open] .lightbox-wrapper {
    display: block;
}

details[open]>summary:first-of-type ~ *,
details.open>summary:first-of-type ~ * {
    display: block;
}

This is a problem because each element that is supposed to be inline will be displayed as a block instead, taking all the width. Like a span or a link. What’s the purpose of these rules?

Example:

[details="Hidden"]
Enhanced image and comparison with the same halo on Earth:
![66bb711c57dd10e4e4f9713ebeec0ccec9a8d0dc1|220x499](upload://eEOifbxarMIErU6OnozO45BJq0I.jpeg)
![541efc040f313220531d74677a9105e44890c29c1|442x500](upload://c0ausOGkNA0BJMAsmAnOqmpWBv6.jpeg)
Though Mars's atmosphere is composed of 95% of carbon dioxide (CO<sub>2</sub>), the halo was produced by water (H<sub>2</sub>O) ice crystal, hence the similarity with the common Earth 22° [halo](https://en.wikipedia.org/wiki/22%C2%B0_halo?oldformat=true). It's exactly the same, in fact.
[/details]

↓

Hidden

Enhanced image and comparison with the same halo on Earth:

Though Mars’s atmosphere is composed of 95% of carbon dioxide (CO₂), the halo was produced by water (H₂O) ice crystal, hence the similarity with the common Earth 22° halo. It’s exactly the same, in fact.

---

Here there are 3 inline elements: <sub> and a link:

---

---

The issue disappears if we enable the safe mode and disable all plugins, even if we have no custom plugins installed:

---

---

A video example from try.discourse.org:

[JammyDodger]

Hi @Canapin

I think (if I’m following this right) this is because of the mix between markdown and HTML. If you leave a linespace between the image and the picture then it should display as you intend:

Hidden

Enhanced image and comparison with the same halo on Earth:

Though Mars’s atmosphere is composed of 95% of carbon dioxide (CO₂), the halo was produced by water (H₂O) ice crystal, hence the similarity with the common Earth 22° halo. It’s exactly the same, in fact.

@Canapin

The issue disappears if we enable the safe mode and disable all plugins, even if we have no custom plugins installed:

I believe the details are counted as a plugin, so if you disable official plugins in safe mode then that will turn them off.

[Canapin (Coin-coin le Canapin)]

Aaah, I see. Because I didn’t put a line break, the following text content wasn’t wrapped by a <p>.

Easy to fix when writing then. That will do for me if this isn’t fixed in the future, though I suppose that could confuse other people sometimes (but I didn’t see any other report so…).

Also, note that the preview works well but not the final post.

---

I also would be interested in the reasoning behind the CSS rules that make every direct child/sibling a block element inside the Hide Details container.

[JammyDodger]

@Canapin

I also would be interested in the reasoning behind the CSS rules that make every direct child/sibling block inside the Hide Details block.

I’m afraid this I do not know. But I’ll pull it out as a quote to give it a little bump in case it got overlooked previously, and hopefully someone else in the community knows more.