Mermaid Gantt diagrams are fixed to 640px width

[pyriand3r]

When writing a bigger mermaid gantt diagram in Joplin i came across, that the diagram stopped growing at some point. Further research revealed, that it seems that the gantt diagram is somehow fixed to max-width: 640px.

I tried to add a <style> tag to the note with the diagram, overwriting the max-width to 100%. But that won't help because the image itself is rendered to 640px. Changing the max-width to 100% only sets the svg-tag to 100% width centering the digram but it keeps its 640px width.

Environment

Joplin version: 2.8.8 Platform: MacOS OS specifics: Monterey 12.5

Steps to reproduce

1. Create a note with a bigger mermaid gantt diagram (with a wide time range)
2. See in the render window that the gantt diagram is only 640px wide and will not expand further
3. add following style code to the note to see the diagram center but not expand

   <style>
   .mermaid svg {
       max-width: 100% !important;
   }
   </style>

Describe what you expected to happen

I would expect the diagram to use the width it needs to render the content correctly and readable, being able to be scrolled horizontally, or at least take as much space as possible.

Screenshots

without css

with css

[davelopware-davea]

If you check the computed styles you may find it is actually overriding the max-width - however by default the svg will maintain it's aspect ratio. When I modify the height in css too, I find the gantt chart fills the full width - try adding:

<style>
  .mermaid svg {
    height: auto;
    max-width:100% !important;
  }
</style>

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[tessus]

I am not sure, if I can replicate this. Can you please provide a gantt chart.

[davelopware-davea]

try this simple example for the gantt chart:

\`\`\`mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task        :done,    des1, 2014-01-06,2014-01-08
Active task           :active,  des2, 2014-01-09, 3d
Future task           :         des3, after des2, 5d
Future task2          :         des4, after des3, 5d
Future task3          :         des5, after des4, 5d
Future task4          :         des6, after des5, 5d
\`\`\`

(note I'm escaping the backticks so that they show in the github comment text - obvs replace \` with just a single ` )

now I get the following:

Which is always limited in width in the rendered view. If I prepend the styling I mentioned on the 10 Aug:

<style>
  .mermaid svg {
    height: auto;
    max-width:100% !important;
  }
</style>

then you see a much more useful full-width gantt chart:

[github-actions[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? If you require support or are requesting an enhancement or feature then please create a topic on the Joplin forum. This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, feel free to create a new issue with up-to-date information.

[tessus]

Fixed by #8890