diff --git a/resources/views/proposals/show.blade.php b/resources/views/proposals/show.blade.php index ccb0e3a..a568dba 100644 --- a/resources/views/proposals/show.blade.php +++ b/resources/views/proposals/show.blade.php @@ -254,17 +254,18 @@ /* Mermaid svg canvas area */ .mermaid-canvas { width: 100%; - min-height: 200px; + height: 520px; cursor: grab; - padding: 1.5rem; - box-sizing: border-box; + position: relative; + overflow: hidden; } .mermaid-canvas:active { cursor: grabbing; } + .mermaid-canvas .mermaid { + width: 100%; + height: 100%; + } .mermaid-canvas svg { display: block; - margin: 0 auto; - max-width: 100%; - height: auto; } /* Fullscreen overlay */ @@ -1047,10 +1048,27 @@ // Ensure SVG has an ID for svg-pan-zoom if (!svg.id) svg.id = 'mermaid-svg-' + index; - // Make SVG fill canvas - svg.style.width = '100%'; - svg.style.height = 'auto'; - svg.removeAttribute('height'); + // Compute a good canvas height from SVG viewBox aspect ratio + const canvasW = canvas.clientWidth || canvas.offsetWidth || 800; + let canvasH = 520; + const vb = svg.getAttribute('viewBox'); + if (vb) { + const parts = vb.split(/[\s,]+/); + if (parts.length >= 4) { + const svgW = parseFloat(parts[2]); + const svgH = parseFloat(parts[3]); + if (svgW > 0 && svgH > 0) { + canvasH = Math.max(400, Math.min(Math.round(svgH * (canvasW / svgW)), 900)); + } + } + } + canvas.style.height = canvasH + 'px'; + + // svg-pan-zoom needs explicit width/height on the SVG element + svg.setAttribute('width', canvasW); + svg.setAttribute('height', canvasH); + svg.style.width = canvasW + 'px'; + svg.style.height = canvasH + 'px'; try { const panZoom = svgPanZoom('#' + svg.id, {