Formatting of bibliography is broken in dashboards

[e-miz]

Bug description

References seem to be very awkwardly formatted in dashboards:

Steps to reproduce

dashboard.qmd

---
title: "Test Dashboard"
bibliography: references.bib
format: dashboard
---

##

Test Citation @1933Zwicky @marcus2016 @1970Rubin

::: {#refs}
:::

references.bib

@article{1933Zwicky,
  author  = {{Zwicky}, F.},
  title   = {{Die Rotverschiebung von extragalaktischen Nebeln}},
  journal = {Helvetica Physica Acta},
  year    = {1933},
  month   = {1},
  volume  = {6},
  pages   = {110-127},
  url     = {https://ui.adsabs.harvard.edu/abs/1933AcHPh...6..110Z},
  adsnote = {Provided by the SAO/NASA Astrophysics Data System}
}
@article{marcus2016,
  title   = {Solubility Parameters of Permanent Gases},
  author  = {Marcus, Yizhak},
  year    = {2016},
  month   = {12},
  date    = {2016-12-08},
  journal = {Journal of Chemistry},
  pages   = {e4701919},
  volume  = {2016},
  doi     = {10.1155/2016/4701919},
  url     = {https://www.hindawi.com/journals/jchem/2016/4701919/},
  note    = {Publisher: Hindawi},
  langid  = {en}
}
@article{1970Rubin,
  author  = {{Rubin}, Vera C. and {Ford}, W. Kent, Jr.},
  title   = {{Rotation of the Andromeda Nebula from a Spectroscopic Survey of Emission Regions}},
  journal = {Ap. J.},
  year    = {1970},
  month   = {2},
  volume  = {159},
  pages   = {379},
  doi     = {10.1086/150317},
  url     = {https://ui.adsabs.harvard.edu/abs/1970ApJ...159..379R},
  adsnote = {Provided by the SAO/NASA Astrophysics Data System}
}

Expected behavior

I was able to fix the formatting using a javascript workaround that removes some CSS classes from the CSL entries:

I also tested this workaround with the American Physical Society CSL (which I frequently use), and it worked as expected:

Here is my workaround:

include-after-body: 
- text : |
    <script type="text/javascript">
    // hack to fix formatting of references; may be csl-dependent
    const nodes = document.querySelectorAll('[class*="csl"]');

    for (const node of nodes) {
      node.classList.remove('html-fill-container');
      node.classList.remove('html-fill-item');
      }
    </script>

I'm a total noob when it comes to CSS/javascript, so I don't know if this will break the citations in another way. It seems fine to me though.

Actual behavior

Components of references are spaced line-by-line, due to some influence from CSS classes that are unique to dashboard cards.

Your environment

IDE: VSCode 1.91.1
OS: Windows 10 WSL2

Quarto check output

Quarto 1.5.55
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.55
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2023.10
      Chromium: 869685

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/emiz/.TinyTeX/bin/x86_64-linux
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /home/emiz/miniconda3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[cscheid]

That isn't surprising; we didn't design dashboards to contain this kind of information. We should do better, but it's not really the goal of the format.

[e-miz]

That's fair! Honestly I was surprised I got as far as I did trying to make an interactive "poster" with a dashboard. Definitely a testament to how versatile it is! 😀