Text is not visible on Mermaid flowchart shapes with markdown string labels

[cy-x]

Description

When I use the markdown string feature to format mermaid flowchart labels, the label position is off by a few pixels, so that most of the text is hidden.

Example:
https://try.gitea.io/terius/MermaidTest/src/branch/main/README.md

flowchart LR
TEST{{"`**Rendering problem**`"}}

I guess this is due to mermaid uses <p> tag for markdown labels and gitea renders mermaid inside an <iframe>. Seems like chrome adds some default margin to <p>-tags inside iframes.

There is an iframeCss const in mermaid.js. Adding a style to set margin to 0 for the iframe might fix the issue?

p {margin: 0}

Gitea Version

1.22.0+dev-101-g112f37c54

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Tested with try.gitea.io

Database

None

[silverwind]

It seems mermaid relies on some CSS which we do not load. Should investigate how to extract this CSS from the mermaid package and then apply it inside the iframe.

https://mermaid.live/edit#pako:eNoVyzsOgzAQRdGtWK-0WIHrpEsFlFMwwQNY8QdNjKLIYu8h3S3ObZiLFzgssXzmjbWaR095vA9ja4TJ2l6yFw15NbuWZ5Rk7UQ4T3RIoomDv-5G2RhC3SQJwV3pWV8Eyn_HRy3DN89wVQ_pcOyeq9wCr8oJbuH4lvMHtZIvOA

Example of missing CSS:

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

[silverwind]

I could not find any CSS to load in the mermaid module, so I'd say it's a bug in Mermaid as their rendering depends on the "css reset" of tailwindcss, but it's not shipped as part of the npm module. I opened mermaid-js/mermaid#4907.

If they don't solve it, we would have to workaround and add these styles manually, likely by adding the base styles of tailwindcss because at least their demo page has that so it would be least likely to break in the future.