remarkPlugins: remark-mermaidjs - text cut off in class diagrams

[Abrom8]

I'm currently facing an error with cut off text in mermaid class diagrams (see image below). It looks a bit like the Vocs css classes are colliding with the plugin. Other diagrams look fine.

I'm using the remark-mermaidjs plugin.

vocs.config.ts:

import { defineConfig } from 'vocs'
import remarkMermaid from 'remark-mermaidjs'

export default defineConfig({
  title: 'Docs',
  sidebar: [
    {
      text: 'Getting Started',
      link: '/getting-started',
    },
    {
      text: 'Example',
      link: '/example',
    },
  ],
  markdown: { 
    remarkPlugins: [ 
      remarkMermaid 
    ] 
  }, 
})

---

example.mdx:

# Example

This is an example page.

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
\`\`\`

---

package.json

{
  "name": "docs",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vocs dev",
    "build": "vocs build",
    "preview": "vocs preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "remark-mermaidjs": "^6.0.0",
    "vocs": "1.0.0-alpha.52"
  },
  "devDependencies": {
    "@types/react": "^18.3.2",
    "typescript": "^5.4.5"
  }
}

Thanks for providing this awesome Documentation Framework!