.column-screen appearing on image, breaking layouts

[jimjam-slam]

Description

Closeread lays its sections out using a nested CSS grid (ie. we declare display: grid and a new grid-template-columns on our .cr-section elements, which contain scrollytelling content.

However, it looks like in certain circumstances, images receive .column-screen. That, in turn causes all of its parents to receive .page-columns and .page-full on page open. The former places the Quarto grid system back on, which nukes our layout.

My bandaid fix for this has been to write competing code to remove those classes from anything below .cr-section. However, this Quarto page open code places those classes all the way up to <main>, and we have no way of knowing whether elements "should" have those classes. There's also potential for a race condition here as we compete with Quarto's code.

I was hoping to understand the circumstances that lead to .column-screen (or potentially another similar .column-* class) being added to images. I don't think we're explicitly adding it to images ourselves: my debugging statements seem to show that the class is not present after our filter runs, but it is present when Quarto's HTML render bootstrapping script encounters it.

But when I run a similar test without Closeread, I can't see it appearing. (I also don't see it, or .page-columns, appearing anywhere other than at the top of the doc, so I'm guessing it's supposed to be a bit of an edge case).

Alternatively, is there a way to opt an image out of this behaviour, if it's coming from Quarto? I was hoping to get a filter in that might catch it, but I don't think I can get in late enough.

cc @andrewpbray

[jimjam-slam]

Never mind, this could be us after all! We'll do some more checks to see why this filter code is inadvertently triggering on the image :)

[jimjam-slam]

We did manage to make a reprex without Quarto after all, so I'll file this as an issue!

[jimjam-slam]

#10899

(sorry, forgot about the "Create issue from discussion" button!)