search

retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.02k stars 201 forks source link

Mermaid component's gantt chart not sizing correctly #626

Open ApolonTorq opened 9 months ago

ApolonTorq commented 9 months ago

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;" image

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

geoffreymcgill commented 9 months ago

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 commented 7 months ago

@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!