From a2fdadd7d208f7e3115fef411f6a40465ef3500b Mon Sep 17 00:00:00 2001 From: max-digi Date: Wed, 6 May 2026 11:46:30 +0100 Subject: [PATCH] fix: scale mermaid diagrams to fit container width Mermaid renders SVGs with explicit width/height attributes that override CSS max-width. Remove those attributes and set width: 100% so diagrams scale to their container instead of rendering at full native size. Co-Authored-By: Claude Sonnet 4.6 --- src/components/MermaidDiagram.tsx | 4 +++- src/components/StaticMermaidDiagram.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/MermaidDiagram.tsx b/src/components/MermaidDiagram.tsx index fe31e9eb..3214bdc4 100644 --- a/src/components/MermaidDiagram.tsx +++ b/src/components/MermaidDiagram.tsx @@ -950,7 +950,9 @@ export function MermaidDiagram({ chart }: { chart: string }) { el.innerHTML = render(lo, th) const svg = el.querySelector('svg') if (!svg) return - svg.style.maxWidth = '100%' + svg.removeAttribute('width') + svg.removeAttribute('height') + svg.style.width = '100%' svg.style.height = 'auto' svg.style.display = 'block' svg.style.margin = '0 auto' diff --git a/src/components/StaticMermaidDiagram.tsx b/src/components/StaticMermaidDiagram.tsx index baa1a326..dd47753b 100644 --- a/src/components/StaticMermaidDiagram.tsx +++ b/src/components/StaticMermaidDiagram.tsx @@ -79,7 +79,9 @@ export function StaticMermaidDiagram({ chart }: { chart: string }) { el.innerHTML = svg const svgEl = el.querySelector('svg') if (svgEl) { - svgEl.style.maxWidth = '100%' + svgEl.removeAttribute('width') + svgEl.removeAttribute('height') + svgEl.style.width = '100%' svgEl.style.height = 'auto' svgEl.style.display = 'block' svgEl.style.margin = '0 auto'