Issue with multiple mermaid flow charts in panel-tabset

[jbrick55]

Description

I'm having trouble getting mermaid flow charts to work in a panel-tabset... specifically on the second and third tabs. The first tab renders as expected. The second and third tabs are just blank. However, the svg code is there when I inspect the html. I couldn't find anything in the discussions or documentation but I'm thinking it is something to do with the div structure?

---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

# Summary of Statistical Techniques

::: {.panel-tabset}

## Estimate a Value

```{mermaid}
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
flowchart LR
    A{"`One value or the difference between two values?`"} -->|One value| B{"`A quantitative or categorical variable?`"}
    A -->|Difference between <br> two values| C{"`Two quantitative or categorical variables?`"}

    B -->|Quantitative| D("`One Mean Confidence Interval`")
    B -->|Categorical| E("`One Proportion Confidence Interval`")

    C -->|Quantitative| F{"`Independent or paired samples?`"}
    C -->|Categorical| G("`Two Proportions Confidence Interval`")

    F -->|Paired| H("`Two Paired Means Confidence Interval`")
    F -->|Independent| I("`Two Independent Means Confidence Interval`"):::big


    classDef decision fill:#f9e79f,stroke:none,stroke-width:2px,rx:20,ry:20,color:#fffff,font-weight:bold, font-size:1.2rem;
    
    classDef result fill:#ffffff,stroke:#ffffff,stroke-width:2px,rx:10,ry:10,font-size:1.2rem,width:300px;

    classDef compact fill:#f9e79f,stroke:none, font-weight:bold, font-size:1.2rem
    class A,B,C,F decision
    class D,E,G,H,I result

    
    %% Apply styling to connector text
    linkStyle 0 1 stroke-width:5px,font-size:18px
    
    classDef padded fill:#ffffff,stroke:none,rx:10,ry:10,padding-bottom:5px;
    class I padded;
```

## Test a Hypothesis

```{mermaid}
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
flowchart LR
    %% Nodes and Connections %%
    A{"`Quantitative or categorical response variables?`"} -->|Categorical| B{"`One or 
    two 
    samples?`"}
    A -->|Quantitative| C{"`One, 
    two, or more 
    samples?`"}

    B -->|One| D["`One Sample 
    Proportion Test`"]
    B -->|Two| E["`Two Sample <br> Proportion Test`"]

    C -->|One| F["`One Sample Mean Test`"]
    C -->|Two| G{"`Independent or paired samples?`"}
    C -->|More than 2| H["`One-Way Analysis of Variance`"]

    G -->|Independent| I["`Two Independent Means Test`"]
    G -->|Paired| J["`Paired Sample Mean Test`"]

    %% Class Definitions %%
    classDef decision fill:#cfe2f3,stroke:none,stroke-width:2px,rx:20,ry:20,color:#fffff,font-weight:bold,font-size:1.2rem;
    classDef result fill:#ffffff,stroke:#ffffff,stroke-width:2px,rx:10,ry:10,font-size:1.2rem,width:300px;

    %% Assign Classes to Nodes %%
    class A,B,C,G decision;
    class D,E,F,H,I,J result;

    %% Link Styling %%
    linkStyle default stroke-width:2px,fill:none,font-weight:bold;
```

## Examine a Relationship

```{mermaid}
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
flowchart LR
    A{"Quantitative or<br>Categorical Variables?"} -->|Quantitative| B{"Make a prediction or<br>examine the strength<br>and direction of the<br>relationship?"}
    A -->|Categorical| C["Chi-Square Test<br>of Independence"]

    B -->|Prediction| D["Simple Linear<br>Regression"]
    B -->|Strength and<br>Direction| E["Correlation"]

    %% Style definitions for the diagram
    classDef decision fill:#cfe2f3,stroke:none,stroke-width:2px,rx:20,ry:20,color:#fffff,font-weight:bold,font-size:1rem;
    classDef result fill:#ffffff,stroke:#ffffff,stroke-width:2px,rx:10,ry:10,font-size:1rem,width:300px;

    %% Apply classes to nodes
    class A,B decision;
    class C,D,E result;

    %% Style the connector text
    linkStyle default stroke-width:2px,fill:none,font-weight:bold;
```
:::

Quarto Version 1.5.56
MacOS Sonoma 14.7
RStudio 2024.09.0+375 (2024.09.0+375)

[cscheid]

Yes, that's a known issue, unfortunately. There's a mismatch between the expectations of the mermaidjs runtime and the hidden div in the tabset, and as a result, mermaid thinks the surrounding div has no width or height, and produces an invisible diagram.

[jbrick55]

Ah, okay, I'm glad it's known... and not me! Thank you.