Quarto Dashboard - Observable Plot Legend on Mobile Issue

[tashapiro]

Bug description

Testing the latest Quarto Dash format with ojs code chunks. I have a repository that includes some example dashboards.

I noticed on mobile, for Observable Plots that include a legend, there is a height scaling issue (keeps elongating). This might be specific to Plots within a card component (have not tested it outside).

Link to dashboard: https://tashapiro.github.io/intro-observable/dashboard/dashboard.html Link to repo: https://github.com/tashapiro/intro-observable/tree/main/dashboard

Including screenshots for reference.

Desktop version is fine:

On mobile, or smaller screens, the plot height starts skewing:

Steps to reproduce

No response

Expected behavior

No response

Actual behavior

No response

Your environment

No response

Quarto check output

No response

[cscheid]

Thanks for the report! I've a hunch about what's happening. We try to be clever with sizing Plot.plot() calls, by automatically injecting a reactive that sets its width and height to be that of the surrounding card. Can you try adding width: undefined and height: undefined to the plot that's rendering wrongly? That will turn off our smart auto-sizing (but will mean your plots will not be responsive as you resize the cards, etc)

[dragonstyle]

It is probably some form of interaction between that auto-sizing and our grid, which convert the row size to the following in responsive mode:

.quarto-dashboard .bslib-grid {
    grid-template-rows: minmax(1em, max-content) !important;
}

I have a feeling the re-computation results in a new height, which then results in a new content size, and so on. Not sure the best way to interrupt the cycle here...