Mermaid diagrams are cropped

[jcayzac]

Info

• Operating System: macOS 11.2
• Node Version: 15.6.0
• Browser Name and Version: Chrome 88
• Fusuma Version: 2.5.0

Type

• bug
• feature request

For Bugs

With the default theme, mermaid diagrams that are larger than 320px are cropped.

Expected Behavior

Diagrams aren't cropped but resized instead.

Actual Behavior

Diagrams are cropped.

How can we reproduce the behavior?

Test diagram:

gitGraph:
options
{
  "nodeSpacing": 150,
  "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

[hiroppy]

Fixed, thanks. https://hiroppy.github.io/fusuma/advanced/#slide-1

[jcayzac]

@hiroppy thank you. It still looks cropped on my phone tho (the SVG doesn't seem to have CSS to constrain its width to the viewport):

[hiroppy]

yeah, I think we should add overflow to the container class. I'll consider it.

[hiroppy]

hm, I checked it but mermaid calculates the current client size and yes it doesn' have viewport....