Mermaid component's gantt chart not sizing correctly

[ApolonTorq]

The Mermaid gantt component is rendering with an excessively constrained max-width.

The following gantt chart is too squashed horizontally: https://retype.com/components/mermaid/#gantt-diagram style="max-width: 300px;"

If the same mermaid markup pasted into https://mermaid.live/ is not squashed horizontally. style="max-width: 100%;

[geoffreymcgill]

I tried upgrading Mermaid to their latest release and the Gantt chart is still being squished to 300px.

The style="max-width: 300px;" and viewBox="0 0 300 196" attributes are not being added by Retype. These attributes are being added by Mermaid when rendering Gantt charts and I do not know why other Mermaid charts function differently.

Upgrading to the v10.4.0 release of Mermaid did not solve the problem.

It will take some time to try and figure out what is going on here and to figure out if a work around is possible.

[ChuckMN]

@geoffreymcgill any updates on this by chance? I am running into this issue as well and am looking for a solution.

Anything the community can do to help with your investigation?

Thanks!