Config Combination "toc-location: left" and "fig-cap location: margin" inhibits folding of callouts containing figures in html output

[Gewerd-Strauss]

Bug description

Hello,

assume the first qmd-file shown below, and render it to html by executing the following command in a shell launched within the qmd-file's working directory:

quarto render index.qmd

This is a simple modification of this example on callouts to include a figure within a callout. When converting to html, callouts can be flagged as collapsable via collapse="true". If a callout contains a code-block which renders a figure, and toc-location is set to left, the callout can no longer be folded. While the small triangle in the callout's header remains responsive, the callout itself seems to fold-then-unfold in rapid succession, thus being always expanded.

If toc-location is set to right or body, this issue does not manifest. If fig-cap-location is set to anything but margin, this issue does not manifest.

I hope these information are sufficient, and will gladly give further details if requested. This issue is not tested for in other output-formats.

Thank you for this absurdly useful utility.

Sincerely, ~Gw

Steps to reproduce

Working:

---
toc-location: right
fig-cap-location: margin
---

# Title 1
::: {.callout-note}  
Note that there are five types of callouts, including:  
`note`, `warning`, `important`, `tip`, and `caution`.  
:::

::: {.callout-tip}

# Tip with Title

This is an example of a callout with a title.  
:::

::: {.callout-caution collapse="true"}

# Expand To Learn About Collapse Original

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.  
:::

::: {.callout-caution collapse="true"}

# Expand To Learn About Collapse with Image

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.  

(see figure [-@fig-codeblock1]).

```{r fig-codeblock1}
#| fig-cap: "MPG vs horsepower, colored by transmission."
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')

:::

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title 2.Aee

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Faulty:

````qmd
---
toc-location: left
fig-cap-location: margin
---

# Title 1
::: {.callout-note}  
Note that there are five types of callouts, including:  
`note`, `warning`, `important`, `tip`, and `caution`.  
:::

::: {.callout-tip}

# Tip with Title

This is an example of a callout with a title.  
:::

::: {.callout-caution collapse="true"}

# Expand To Learn About Collapse Original

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.  
:::

::: {.callout-caution collapse="true"}

# Expand To Learn About Collapse with Image

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.  

(see figure [-@fig-codeblock1]).

```{r fig-codeblock1}
#| fig-cap: "MPG vs horsepower, colored by transmission."
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')

:::

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title 2.Aee

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Expected behavior

The callout should remain foldable regardless of the used setting for `toc-location`, especially as `left` and `right` are antonyms which do not convey that one would be handled differently.

### Actual behavior

When setting `toc-location = "left"`, any callout flagged with `collapse="true"` will become effectively unfoldable. _Visually_, the callout seems to fold and unfold in rapid succession - or maybe the callout-element is just flickering, I don't know.

The Quarto-CLI does not return anything unusual or out-of-place for either case.

### Your environment

OS:  
Betriebsystemname   Microsoft Windows 11 Home
Version 10.0.22621 Build 22621

IDE:  
RStudio 2023.09.0 Build 463

### Quarto check output

[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.3.450
      Path: C:\Users\Claudius Main\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.2.3
      Path: C:/Users/CLAUDI~1/AppData/Local/Programs/R/R-42~1.3
      LibPaths:
        - C:/Users/Claudius Main/AppData/Local/Programs/R/R-4.2.3/library
      knitr: 1.43
      rmarkdown: 2.22

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

Note: 
Oddly, python 3 is not recognised. It is certainly installed under `C:\Python311\python.exe`. I have recently reinstalled and changed my python setup, but this issue occures regardless of python's installation - or lack thereof.

[mcanouil]

Thanks for the report!

Note that you should note use level 1 header[^1] in callouts and you should not mix YAML and inline syntax for code cell.

::: {.callout-caution collapse="true"}
## This is valid

This is content
:::

```{r}
#| label: fig-codeblock1
#| fig-cap: "MPG vs horsepower, colored by transmission."
library(ggplot2)
mtcars2 <- mtcars
mtcars2$am <- factor(
  mtcars$am, labels = c('automatic', 'manual')
)
ggplot(mtcars2, aes(hp, mpg, color = am)) +
  geom_point() +  geom_smooth(formula = y ~ x, method = "loess") +
  theme(legend.position = 'bottom')

---

A smaller example showing the issue with the structure, which actually is not really about the collapse part itself as it can be seen that the structure is clearly wrong.

````qmd
---
format: html
toc-location: left
fig-cap-location: margin
---

::: {.callout-caution collapse="true"}
## Expand To Learn About Collapse Original

This is an example.
:::

::: {.callout-caution collapse="true"}
## Expand To Learn About Collapse with Image

```{r}
#| fig-cap: "MPG vs horsepower, colored by transmission."
plot(1)

:::

<img width="1624" alt="image" src="https://github.com/quarto-dev/quarto-cli/assets/8896044/050a70ed-8131-4b23-b9f2-e319b526459d">

[^1]: See <https://quarto.org/docs/authoring/callouts.html#markdown-syntax>.

[petrbouchal]

Possibly related to #7153