Footnote/{.aside} from code annotation list HTML render bug.

[sasja-san]

Bug description

If you change between short footnote (^[footnote text]) and aside ([Text put in marging]{.aside}) both render really badly.
The code annotation list isn't put in the main text entry column.

---
project:
  type: website
  output-dir: docs


website:
  title: "A Somewhat Gentle Introduction to Haskell"
  navbar:
    left:
      - href: index.qmd

format:
  html:
    code-annotations:   true
    code-line-numbers:  false
    code-overflow:      scroll
    code-fold:          false


# Gettin muh tufte on
reference-location: margin
citation-location: document
tbl-cap-location: margin
cap-location: margin
---

```{.haskell}
fact :: Int -> Int          -- <1>
fact 1 = 1                  -- <2>
fact n = n * (fact (n-1))   -- <3>
```
1. This is the *type signature* of the function. It says that it takes an `Int` (the first mention) and returns (the second mention) an `Int`.
2. Base case, but only for the number `1`. To cover `0`, either add a similar line or solve it with guards^[The implementation of `takeWhile` in the list of exercise uses guards. Keep a lookout!].
3. The n to the left of `=` is the argument to the function. Everything on the right side of `=` is the "return" expression. 

Quarto check output

Latest git version. All dependencies except R installed.

git show -s --format="%as %H"
2024-08-29 a2430bedc2c070bf7997eeabc8ab20148576d967

[mcanouil]

Why do you have project and website inside the front matter of a single document?
Please, make sure to share valid Quarto document.

[sasja-san]

It is a valid enough to render just fine on my machine. But okay, Here's a something that looks a bit cleaner. And an image of the HTML rendering.

---
format:
  html:
    code-annotations:   true
    code-line-numbers:  false
    code-overflow:      scroll
    code-fold:          true

reference-location: margin
---

```{.haskell}
fact :: Int -> Int          -- <1>
fact 1 = 1                  -- <2>
fact n = n * (fact (n-1))   -- <3>
```
1. This is the *type signature* of the function. It says that it takes an `Int` (the first mention) and returns (the second mention) an `Int`.
2. Base case, but only for the number `1`. To cover `0`, either add a similar line or solve it with guards^[The implementation of `takeWhile` in the list of exercise uses guards. Keep a lookout!].
3. The n to the left of `=` is the argument to the function. Everything on the right side of `=` is the "return" expression. 

[mcanouil]

Being ignored does not mean valid.
Thanks for the shorter and cleaner example, we'll investigate this and get back to this issue.

[cderv]

This is bad interaction with all the grid layout we have

• Main CSS grid for the document
• CSS grid for code annotation below
• Placement of content in margin when the footnote is from one of the annotation

For now, it means that using footnotes placed in margin in code annotation is not supported.

[cderv]

Main problem is that when footnotes is inside the annotation is that our processing will insure that the parent container has correct grid and we get this

-<dl class="code-annotation-container-grid">
+<dl class="code-annotation-container-grid page-columns page-full">

Applying those classes on the code-annotation-container-grid makes some CSS applying and they messes up the layout.

The check for columns content happens in there

quarto-cli/src/format/html/format-html-bootstrap.ts

Lines 1146 to 1195 in 6173a70

	const columnLayouts = getColumnLayoutElements(doc);
	// If there are any of these elements, we need to be sure that their
	// parents have acess to the grid system, so make the parent full screen width
	// and apply the grid system to it (now the child 'column-' element can be positioned
	// anywhere in the grid system)
	if (columnLayouts && columnLayouts.length > 0) {
	const processEl = (el: Element) => {
	if (el.tagName === "DIV" && el.id === "quarto-content") {
	return false;
	} else if (el.tagName === "BODY") {
	return false;
	} else {
	return true;
	}
	};
	const ensureInGrid = (el: Element, setLayout: boolean) => {
	if (processEl(el)) {
	// Add the grid system. Children of the grid system
	// are placed into the body-content column by default
	// (CSS implements this)
	if (
	!el.classList.contains("quarto-layout-row") &&
	!el.classList.contains("page-columns")
	) {
	el.classList.add("page-columns");
	}
	// Mark full width
	if (setLayout && !el.classList.contains("page-full")) {
	el.classList.add("page-full");
	}
	// Process parents up to the main tag
	const parent = el.parentElement;
	if (parent) {
	ensureInGrid(parent, true);
	}
	}
	};
	columnLayouts.forEach((node) => {
	const el = node as Element;
	if (el.parentElement) {
	ensureInGrid(el.parentElement, true);
	}
	});
	}

It is expected that all parents have the class, but inside dl.code-annotation-container-grid is not ok.

IMO We need

• Either review this processing to handle the dl element problem
• Either tweak the CSS rules to handle this case
• Either move the element that should go in margin, out of the dl (which could probably be done in our code annotation processing).

[github-actions]

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate.
If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository.
Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````