force left-align for code in layout

[cscheid]

… to beat the mermaid centering div setting

Fixes the rendering for the following repro case:

---
title: "Untitled"
format: html
---

## Section {#sec-woozy}

```{r}
#| label: fig-slot
#| fig-cap: "The Big One"
#| fig-subcap: ["First", "Second"]
plot(cars)
plot(pressure)
```

[jjallaire]

@dragonstyle Could you review this and back port to v1.3 as required?

[cderv]

As there is no ticket opened about the related issue, I am posting here. Mainly for possible future reference about the context of this problem.

Adapting the CSS does indeed fix the issue, however I was curious about why this was needed. I noticed that our HTML structure is quite different if we have only one figures, or using subfigure.

If we

```{r}
#| label: fig-slot
#| fig-cap: "The Big One"
plot(pressure)
```

it creates a div.cell then within a div.sourceCode.code-cell followed by a div.cell-output-display which contains the div.quarto-figure having the <figure> element.

It gives something like

<div class="cell">
  <div class="sourceCode cell-code" id="cb1">
  (...)
  </div>
  <div class="cell-output-display">
    <div id="fig-slot" class="quarto-figure quarto-figure-center anchored">
    <figure class="figure">
      (...)
    </figure>
    (...)
    </div>
  </div>
</div>

However, when using sub figure, it is quite different

```{r}
#| label: fig-slot
#| fig-cap: "The Big One"
#| fig-subcap: ["First", "Second"]
plot(cars)
plot(pressure)
```

the code block is inside the div.quarto-figure within a <figure> itself. Then inside that figure we have the div.sourceCode?code-cell . This means any CSS we apply to .quarto-figure could apply to code blocks unless we are very careful to prevent it.

<div class="quarto-figure">
  <figure class="figure">
    <div class="sourceCode cell-code" id="cb1">
    (...)
    </div>
    <div class="cell-output-display">
      <div id="fig-slot-1" class="quarto-figure quarto-figure-center anchored">
        <figure class="figure"> (...) </figure>
        (...)
      </div>
    </div>
    <div class="cell-output-display">
      <div id="fig-slot-2" class="quarto-figure quarto-figure-center anchored">
        <figure class="figure"> (...) </figure>
        (...)
      </div>
    </div>
    <figcaption class="figure-caption">Figure&nbsp;1: The Big One</figcaption>
  </figure>
  (...)
</div>

It seems to the way we create subfigure from the beginning - so I believe this is expected that way ?

To me it was really not obvious and quite puzzling to not have the div.cell and have the div.sourceCode inside the figure itself. I would have thought the CodeBlock would be placed right before the multiple figures. IMO This is definitely prone to more CSS error in the future so something to watch out for. Unless we would like to adapt this...

[cscheid]

@cderv I agree that we should try to make the output HTML more uniform. The underlying source of the problem is that we have a large number of different code paths and possible configurations. This is not uniform, but consider the following possibilities:

• no figures/figures/subfigures, maybe with
• no captions/captions/subcaptions, maybe with
• no layout/column layout/margin layout

The crossref work I'm doing has a side effect of simplifying our Lua data structures as they're being processed. From there we'll be able to clean up the formatting and hopefully the output. Some of it is already happening. But we should probably defer this discussion to the point where we have a better foundation.

[cderv]

Understood - This is awesome to know that the crossref works will make our foundation better for all this ! Thanks

[dragonstyle]

I tinkered with printing text and warnings and only could find the annotations case that was still escaping alignment...