'cutting off' styling issue with our MermaidJS diagrams in LR view

[quetzalliwrites]

Describe the bug

In some instances on the /website, words inside elements in MermaidJS diagrams get cut off in LR view.

How to Reproduce

You could reproduce this issue is both blog posts or docs content.

One example of this can be seen in PR https://github.com/asyncapi/website/pull/992.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[sambhavgupta0705]

has this issue been resolved as I don't see any error here

[AnishKacham]

has this issue been resolved as I don't see any error here

Nope. I think it still persists. And as mentioned not only int the LR mode but also the TD mode of mermaid

[sambhavgupta0705]

@AnishKacham if it still exists then you many try to resolve it

[AnishKacham]

will look into it

[AnishKacham]

So, the text gets cut off when you directly open the page or reload the page. Suppose you navigate from the sidebar to a certain page that contains mermaid diagrams this won't be reproduced unless you reload the page again. I've seen a few mermaid issues that mention truncation of text.

When I looked into the rendered html page. Mermaid wad attaching an ID of "#mermaid-0", changing it to "#mermaid-1" seems to fix this on the static page.

[NightFury742]

@alequetzalli I was trying to fix this, but I couldn't understand how the mermaid.js markdown files are rendered on the website. I would be glad to fix this issue if @AnishKacham isn't working on this already.

[quetzalliwrites]

We def still need help with this one! Thank you for reaching out.

@AnishKacham, can you sync with @NightFury742 over Slack? @NightFury742 you should join the AsyncAPI slack channel and share your questions directly with Animesh 😃

[NightFury742]

Sure @alequetzalli , thanks!

[sambhavgupta0705]

closing this as mermaidjs is rendering correctly asyncapi.com/docs/concepts/application