refactor: improve mermaid diagram container sizing and responsiveness using dynamic height calculation

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;
+            position: relative;
-            box-sizing: border-box;
+            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
+            // Compute a good canvas height from SVG viewBox aspect ratio
-            svg.style.width = '100%';
+            const canvasW = canvas.clientWidth || canvas.offsetWidth || 800;
-            svg.style.height = 'auto';
+            let canvasH = 520;
-            svg.removeAttribute('height');
+            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, {