Figure inside .column-screen steals that class

[jimjam-slam]

Bug description

When we place an image with a caption inside a fenced div with .column-screen, the image gets .column-screen and the section does not, which causes various kinds of layout havoc (the rest of the section doesn't get the enlarged width, and .page-columns propagates up from the image through the rest of the document, which makes placing one's own CSS grids inside the section extremely difficult).

Steps to reproduce

Test case: https://github.com/jimjam-slam/test-quarto-cr-img-classes

---
title: Test test test
format: html
---

Oh hello! Here are some images with classes:

::::{.column-screen}

This text is inside the section. But the section itself doesn't seem to get `.column-screen`...

:::{#working}
This works: ![a caption](trees.png)
:::

This also works (no caption):

:::{#alsoworking}
![](trees.png)
:::

But this doesn't:

:::{#notworking}
![This one is breaks things](trees.png)
:::

::::

Expected behavior

The fenced div in the input document that has .column-screen should have it in the output HTML, and the image inside #notworking should not. The other ancestors of the image should also not have .page-fill .page-columns.

Actual behavior

The image receives .column-screen and goes to full width. Other elements in the section don't. Any nested grids declared inside the broken section tend to get overridden, as .page-columns is on all ancestors of the image inside.

Your environment

• OS: macOS Sequoia 15.0
• VSCode 1.93.1

Quarto check output

Check file:///Users/rensa/code/quarto-cli/src/quarto.ts
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 2d0331c755c74544539cec2706df4bc4d378694d
      Path: /Users/rensa/code/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/rensa/Library/TinyTeX/bin/universal-darwin
      Version: 2021

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /Users/rensa/miniforge3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........OK
      Version: 4.2.1
      Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
      LibPaths:
        - /Users/rensa/Library/R/arm64/4.2/library
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      knitr: 1.42
      rmarkdown: 2.21

[✓] Checking Knitr engine render......OK

EDIT: added a screenshot of the output, and also a link to previous discussion:

[jimjam-slam]

I should note that if you remove the offending image in #notworking, the layout works fine!

[cscheid]

Thanks, I can repro.

You can work around in the meantime by moving the offending image to its own div.

I believe the issue arises from our expectation that .column-screen would be used to wrap a single element at a time. (You can infer this from the way we use it in our docs, but we never actually describe this and I think everything should just work.)

[jimjam-slam]

That makes sense! I've reached for it in the past to build things like website hero sections, so if it's possible for it to work with more complex layouts, that would be fantastic (but I understand that you hadn't intended it for that kind of use).

Absolute worst case for us over on Closeread, we could potentially write our own CSS to re-implement the .column-* class 🤔 (cc @andrewpbray)