ETL mermaid diagram is missing link text

[AetherUnbound]

Description

The ETL documentation page is missing a link: https://docs.openverse.org/meta/media_properties/etls.html

Clicking on the box does jump to the appropriate session, but we should figure out why the text isn't rendering.

Screenshots

[dhruvkb]

The text is rendering correctly for me. To be extra sure, I also validated the diagram on Mermaid's Live Editor, where it also rendered correctly.

[AetherUnbound]

Interesting!! It seems to be only rendering incorrectly for me in Firefox (including in-private browsing) 🤔 I'll have to look into this!

[AetherUnbound]

Here's what I'm seeing on Firefox:

The HTML looks different between that and Chrome too.
Chrome

<g id="flowchart-ESF-15" class="node default ETL clickable">
    <rect height="78" width="230" y="-39" x="-115" ry="5" data-et="node" data-id="abc" rx="5" style="fill:#fa7def !important" class="basic label-container"></rect>
    <g transform="translate(-100, -24)" style="" class="label">
        <rect></rect>
        <foreignObject height="48" width="200">
            <div style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml">
            <span class="nodeLabel"><p>Index creation &amp; deleted media filtering</p></span></div>
        </foreignObject>
    </g>
</g>

Firefox

<g id="flowchart-ESF-15" class="node default ETL clickable">
    <rect height="30" width="30" y="-15" x="-15" ry="5" data-et="node" data-id="abc" rx="5" style="fill:#fa7def !important" class="basic label-container"></rect>
    <g transform="translate(0, 0)" style="" class="label">
        <rect></rect>
        <foreignObject height="0" width="0">
            <div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;">
            <span class="nodeLabel"><p>Index creation &amp; deleted media filtering</p></span></div>
        </foreignObject>
    </g>
</g>

[dhruvkb]

I am also able to reproduce the bug on Firefox so it is indeed a problem, but it only happens on the docs site. The same diagram, copied into Mermaid's live editor, renders correctly on Firefox.

[AetherUnbound]

I wonder if it's part of our CSS or perhaps the way Sphinx is rendering things?

[AetherUnbound]

Unfortunately I think this either has to do with the Mermaid extension for Sphinx or some other aspect upstream 😞 - I'll close this for now.