R Leaflet legends are centered when labelled as `fig-`s

[jack-davison]

Bug description

When a leaflet map is included in a Quarto HTML report, any categorical legend ends up centered when the chunk is labelled as a figure. This looks a little strange/ugly, particularly when the labels are either very different lengths or are only subtly different lengths. Oddly, if you just print the leaflet map without labelling it as a figure, everything works okay.

Note that you can manually fix this by adding this to a style tag, but I imagine this isn't the intended fix, and that messing around with quarto's style options may have unintended consequences.

.quarto-figure-center>figure>p, .quarto-figure-center>figure>div {
    text-align: left;
}

No idea if this happens with Python/Folium, but I intuitively expect so?

Steps to reproduce

---
title: Dodgy leaflet
format: html
---

```{r}
#| label: makemap
library(leaflet)

map <-
  leaflet() |> 
  addTiles() |> 
  addLegend(
    labels = c("Big long label oh no!", "lil' lab"), 
    colors = c("red", "blue")
  )
```


```{r}
#| label: fig-leaflet
#| fig-cap: "A leaflet figure"
map
```

```{r}
#| label: nolab
map
```

Expected behavior

The leaflet legend should be left aligned (bottom of image).

Actual behavior

The leaflet legend is centered (top of image).

Your environment

• RStudio 2023.03.0+386
• Windows 10

Quarto check output

$ quarto check
A new release of Deno is available: 1.28.2 → 1.38.5 Run `deno upgrade` to install it.
[>] 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\jd38\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/jd38/AppData/Local/Programs/R/R-4.2.3
      LibPaths:
        - C:/Users/jd38/AppData/Local/R/win-library/4.2
        - C:/Users/jd38/AppData/Local/Programs/R/R-4.2.3/library
      knitr: 1.44
      rmarkdown: 2.25

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

NB: I'm using R leaflet v2.2.0.9000.

[cscheid]

Thanks for the report. This is indeed the CSS we use to style Figure captions and labels, so we can't change it on our side.

Immediately, a better CSS workaround for you is this:

figure.quarto-float div.leaflet-control {
  text-align: left;
}

I'm wondering how we can address this. @cderv is there a way to check, at the end of knitr execution, if user code attached a package? The good fix here would be for us to detect that someone used leaflet, and then add a css sheet of fixups.

[cderv]

We had issues like that in the past (rstudio/rmarkdown#1949) and it happens that R package leaflet had already some patched CSS rules.

Adding there

div.leaflet-control {
  text-align: left;
}

solves this - which is similar fix we did for rstudio/rmarkdown#1949

So I would be inclined to do a PR there to change this instead of us trying to detect leaflet.

Would that be ok with @cscheid or do you want us really to detect that ?

[cscheid]

Oh, leaflet is from Posit? 🤦 yeah, we should totally fix that upstream!

[cderv]

@cscheid in fact, another ideas:

We could also just adapt our CSS rules for Quarto figures to not apply on div of class html-widget. I believe all HTML widgets output created with R will have a div of this class.

For example, the rule that causes issue here is

.quarto-figure-center>figure>p, .quarto-figure-center>figure>div {
    text-align: center;
}

And so we could do

.quarto-figure-center>figure>p, .quarto-figure-center>figure>div:not(.html-widget) {
    text-align: center;
}

This should prevent issues with any other HTML widgets. What do you think ?