Quarto HTML incompatible with bslib full screen cards

[msummersgill]

Bug description

This is cross-posted from Expand Plotly output in Quarto HTML document to full screen

I would like to make plotly output from a chunk in a Quarto HTML document expandable to a full screen view. bslib seems to offer such a solution via card(full_screen = TRUE,...) which is documented at https://rstudio.github.io/bslib/articles/cards.html#filling-outputs

I can do this with R Markdown, but it appears that either bslib is unable to modify the theme as needed to support this behavior, or some Quarto CSS theming may be overriding desired behavior.

When I render the Quarto version, two things are different than desired about the layout:

1. Clicking the "expand" button only expands the plot to the size of the quarto output
2. The "expand" button is rendered as a black bar at the bottom of the graphic instead of the aesthetically pleasing arrows that only appear when the user hovers over the card.

Unzoomed:

Zoomed:

Steps to reproduce

---
title: "Quarto Zoom Plotly"
format: html

---

```{r}
#| warn: false
#| message: false

suppressPackageStartupMessages({
  library(bslib)
  library(shiny)
  library(htmltools)
  library(plotly)
})

card(title = "",
     full_screen = TRUE,
      plot_ly(x = diamonds$cut)
     )

```

---
title: "R Markdown Zoom Plotly"
output:
  html_document:
    theme:
      version: 5
---

```{r warning=FALSE, message=FALSE}
#| warn: false
#| message: false

suppressPackageStartupMessages({
  library(bslib)
  library(shiny)
  library(htmltools)
  library(plotly)
})

card(title = "",
     full_screen = TRUE,
      plot_ly(x = diamonds$cut)
     )

```

Expected behavior

No response

Actual behavior

No response

Your environment

RStudio 2022.12.0+353.pro20 "Elsbeth Geranium" Release (02ace23e263335c78e1df5b0892e48913e5fcecf, 2022-12-15) for Ubuntu Bionic

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Ubuntu 20.04

Quarto check output

Testing against a dev version pulled from the repo today

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.2: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      Path: /home/matthew14786/quarto-cli/package/dist/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.9.16
      Path: /opt/python/3.9.16/bin/python3
      Jupyter: 5.1.0
      Kernels: dash-testing-3.9.16, testvenv, python3, py3.10.9, py3.9.16

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

[✓] Checking R installation...........OK
      Version: 4.2.2
      Path: /opt/R/4.2.2/lib/R
      LibPaths:
        - /home/matthew14786/R/x86_64-pc-linux-gnu-library/4.2
        - /opt/R/4.2.2/lib/R/library
      knitr: 1.43
      rmarkdown: 2.22

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

[mcanouil]

bslib outputs "complex" HTML + CSS and in Quarto it does so within the layout system using grid.
Without knowing what exactly bslib outputs and when, it's hard to work with that I'm afraid, or at least, it seems not trivial to me.

[msummersgill]

Should this be reported to rstudio/bslib instead? cc @cpsievert

I was on the fence about where the solution should be implemented, but since a design goal for Quarto is to make the transition from R Markdown seamless, I suspect a patch might address behavior that is incompatible with other types of .Rmd-supported content as well.

[cpsievert]

Here is a good place for this issue since Quarto will need some changes to address this problem. I just sent a proposal in #6099

[cpsievert]

Actually, we're going to address the underlying problem here in {bslib}. Once rstudio/bslib#664 is merged, you should be able to fix the issue by upgrading {bslib}: remotes::install_github("rstudio/bslib")

[msummersgill]

@cpsievert I tested with the development branch of bslib today.

The original example proposed now renders exactly as desired. Thanks for your help!