From 4dfe1ffc9aaa37e22cdb855c475445681f106f33 Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Thu, 25 Sep 2025 15:58:05 -0700
Subject: [PATCH] fix: update MermaidBlock styles for improved rendering and
 add foreignObject (#7960)

fix: update MermaidBlock styles for improved rendering and add foreignObject width

Co-authored-by: lixiaoyang1992 <lixiaoyang2345@gmail.com>
---
 gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx | 2 +-
 gui/src/components/StyledMarkdownPreview/markdown.css     | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx b/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
index 9deea5872..b11c69a03 100644
--- a/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
+++ b/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
@@ -141,7 +141,7 @@ export default function MermaidDiagram({ code }: { code: string }) {
       {!!error ? (
         <div className="text-error whitespace-pre text-sm">{error}</div>
       ) : (
-        <div className="relative">
+        <div className="mermaid relative">
           <div className="absolute right-0 z-10 m-2 flex items-center gap-x-1">
             <ToolTip content={"Zoom In"}>
               <MagnifyingGlassPlusIcon
diff --git a/gui/src/components/StyledMarkdownPreview/markdown.css b/gui/src/components/StyledMarkdownPreview/markdown.css
index afb57b9fa..d9dfcfa2d 100644
--- a/gui/src/components/StyledMarkdownPreview/markdown.css
+++ b/gui/src/components/StyledMarkdownPreview/markdown.css
@@ -1038,3 +1038,6 @@ body[data-color-mode*="light"] {
 .token.entity {
   cursor: help;
 }
+.mermaid foreignObject {
+  width: 100%;
+}