quarto-dev / quarto-dev/quarto-cli
GraphViz diagrams have fixed width, causing horizontal overflow on mobile
@cscheid is already working on this.
Since Jun 5, 2024.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
Most chunk outputs are wrapped in a figure, then in a div.quarto-figure. The figure has width: 100% and the plot output itself (at least in the case of an img.img-fluid has max-width: 100%. All up, the plot shrinks from its native width at narrower widths.
GraphViz output appears to not be wrapped in .quarto-figure, so its enclosing figure does not receive width: 100%, and the sig itself has max-width: none, so it does not shrink from its native width, causing horizontal overflow.
I wondered if this might be coming from this SVG code in Quarto, but it looks like that's designed for a use case where an explicit height and width has been provided. I haven't in this case (unless that's something that GraphViz does under the hood). Not sure if this code is being inadvertently triggered, if it's triggered by design and I've missed something, or I'm incorrectly attributing the problem to this.
Steps to reproduce
Repro (already rendered): https://github.com/jimjam-slam/test-quarto-graphviz-sizing/tree/main
Expected behavior
For the GraphViz SVG to shrink proportionally to container width, as the R plot above it does.
Actual behavior
The SVG remains at its native width, causing a horizontal scrollbar to appear (sorry, it's one of those disappearing Mac ones, so you can't see the scrollbar in this screenshot).
(Have verified this on Edge 123 and Safari 17.2.1)
Your environment
macOS 14.2.1
VSCode 1.87.2
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.11: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.10.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 26172cb90eb6c2d41742df662771c1d4b2197a3f
Path: /Users/rensa/code/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/rensa/Library/TinyTeX/bin/universal-darwin
Version: 2021
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.9.7 (Conda)
Path: /Users/rensa/miniforge3/bin/python
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with conda install jupyter
[✓] Checking R installation...........OK
Version: 4.2.1
Path: /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources
LibPaths:
- /Users/rensa/Library/R/arm64/4.2/library
- /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
knitr: 1.42
rmarkdown: 2.21
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.