fix: prevent mermaid LR diagrams from being squished

Set `flowchart.useMaxWidth: false` so LR (left-to-right) flowcharts
render at their natural width instead of being compressed to fit the
container. A scrollable wrapper is added so wide diagrams remain
accessible without overflowing the layout.

Closes #6697

Author: AhmadYasser1

frontend/src/plugins/layout/mermaid/mermaid.tsx

@@ -22,6 +22,7 @@ const DEFAULT_CONFIG: MermaidConfig = {
   flowchart: {
     htmlLabels: true,
     curve: "linear",
+    useMaxWidth: false,
   },
   sequence: {
     diagramMarginX: 50,
@@ -88,7 +89,11 @@ const Mermaid: React.FC<Props> = ({ diagram }) => {
     return null;
   }
 
-  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <div dangerouslySetInnerHTML={{ __html: svg }} />
+    </div>
+  );
 };
 
 export default Mermaid;