fix height of mermaid diagrams

[daiyam]

Description

This change fixes the height of the mermaid diagrams.

Before	After

Issue fixed

• Mermaid diagrams don't resize in height #2335
• Can I create a tree diagrams like the picture below in boostnote #2044

Type of changes

• ⚪ Bug fix (Change that fixed an issue)
• ⚪ Breaking change (Change that can cause existing functionality to change)
• 🔘 Improvement (Change that improves the code. Maybe performance or development improvement)
• ⚪ Feature (Change that adds new functionality)
• ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

• 🔘 My code follows the project code style
• ⚪ I have written test for my code and it has been tested
• 🔘 All existing tests have been passed
• 🔘 I have attached a screenshot/video to visualize my change if possible

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #2335: Mermaid diagrams don't resize in height
• #3419: Tree diagrams

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[ZeroX-DG]

This may sound silly but can you explain to me how this works? 😄 Why did you multiply ratio with clientWidth / maxWidth?

[daiyam]

It's to compensate the max-width 100% !important applied on the svg.
el.parentNode.clientWidth / maxWidth is the ratio between the available space and the diagram that mermaid wanted.

[ZeroX-DG]

Sorry for let you wait for so long, can you fix the conflict @daiyam ?

[qrospars]

I tried on my MacOS and I can see that it works fine :) Would be nice if @daiyam could fix the merge issue.
Also remember that there was a IssueHunt page for this issue, if you want to claim the bounty: https://issuehunt.io/r/BoostIO/Boostnote/issues/2335

[daiyam]

@qrospars I will try to fix it this week-end

[ZeroX-DG]

LGTM 🎉