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 <[email protected]>

Author: RomneyDa

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

gui/src/components/StyledMarkdownPreview/markdown.css

@@ -1038,3 +1038,6 @@ body[data-color-mode*="light"] {
 .token.entity {
   cursor: help;
 }
+.mermaid foreignObject {
+  width: 100%;
+}