Export image/svg sometime have big blank space on top and bottom

Describe the bug Sometime, when I write very long sequence diagram, export image or svg always have big blank space on top/bottom image/svg.

I don't want this.

To Reproduce Steps to reproduce the behavior:

Go to Bug link
Click on Actions at Left-side panel
Keep PNG size: auto (default)
Click download PNG button
Open image and see error

Expected behavior Not have blank space on top/bottom of image/svg

Screenshots

Desktop (please complete the following information):

OS: macOS 12.1
Browser: Chrome
Version: 96

Suggest solution When using inspector I found that

SVG element on DOM have large height: 3637

So when export, export function using this height https://github.com/mermaid-js/mermaid-live-editor/blob/18a83a807a6ace0cda4d6d3f6008b7c9d87ea3d0/src/lib/components/actions.svelte#L26-L29

If svg element not have this attribute => export function will re-calculate and using fitable height.

See, so new code maybe:

        const svg: HTMLElement = document.querySelector('#container svg');
        svg.removeAttribute('height');
        const box: DOMRect = svg.getBoundingClientRect();
        canvas.width = box.width;
        canvas.height = box.height;

mermaid-js / mermaid

Export image/svg sometime have big blank space on top and bottom #2649