quarto-dev / quarto-dev/quarto-cli

GraphViz diagrams have fixed width, causing horizontal overflow on mobile

Open
#9,249 9 comments 0 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Jun 5, 2024.

bug diagrams
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).

image

(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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.