From 40fbb750db539212afeeef80d54a04d610b28a6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 25 May 2026 07:43:08 +0300
Subject: [PATCH] fix: improve mermaid fullscreen rendering and sizing logic
 for pan-zoom initialization

---
 resources/views/proposals/show.blade.php | 42 ++++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/resources/views/proposals/show.blade.php b/resources/views/proposals/show.blade.php
index a568dba..fa1f116 100644
--- a/resources/views/proposals/show.blade.php
+++ b/resources/views/proposals/show.blade.php
@@ -288,8 +288,8 @@
             border-radius: 20px;
             overflow: hidden;
             width: 92vw;
-            max-width: 1200px;
-            max-height: 90vh;
+            max-width: 1400px;
+            height: 85vh;
             display: flex;
             flex-direction: column;
             box-shadow: 0 40px 80px rgba(0,0,0,0.5);
@@ -299,17 +299,13 @@
         }
         .mermaid-fullscreen-canvas {
             flex: 1;
-            overflow: auto;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 2rem;
+            overflow: hidden;
+            position: relative;
             cursor: grab;
         }
         .mermaid-fullscreen-canvas:active { cursor: grabbing; }
         .mermaid-fullscreen-canvas svg {
-            width: 100%;
-            height: auto;
+            display: block;
         }
 
         /* Bullet lists */
@@ -1117,19 +1113,29 @@
             if (!svg) return;
 
             const fsCanvas = document.getElementById('mermaid-fs-canvas');
-            const svgClone = svg.cloneNode(true);
-            svgClone.id = 'mermaid-fs-svg-' + index;
-            svgClone.style.width = '100%';
-            svgClone.style.height = 'auto';
-            svgClone.removeAttribute('height');
             fsCanvas.innerHTML = '';
-            fsCanvas.appendChild(svgClone);
 
+            // Show overlay first so fsCanvas has layout dimensions
             document.getElementById('mermaid-fs-overlay').classList.add('active');
             document.body.style.overflow = 'hidden';
 
-            // Init pan-zoom on cloned SVG
+            // Init pan-zoom on cloned SVG after layout is available
             setTimeout(() => {
+                const svgClone = svg.cloneNode(true);
+                svgClone.id = 'mermaid-fs-svg-' + index;
+
+                // Get actual pixel dimensions of the fullscreen canvas
+                const fsW = fsCanvas.clientWidth || fsCanvas.offsetWidth || 1000;
+                const fsH = fsCanvas.clientHeight || fsCanvas.offsetHeight || 600;
+
+                // Set explicit dimensions on SVG for svg-pan-zoom
+                svgClone.setAttribute('width', fsW);
+                svgClone.setAttribute('height', fsH);
+                svgClone.style.width = fsW + 'px';
+                svgClone.style.height = fsH + 'px';
+
+                fsCanvas.appendChild(svgClone);
+
                 try {
                     fsActivePanZoom = svgPanZoom('#mermaid-fs-svg-' + index, {
                         zoomEnabled: true,
@@ -1145,8 +1151,8 @@
                         }
                     });
                     document.getElementById('mermaid-fs-pct').textContent = Math.round(fsActivePanZoom.getZoom() * 100) + '%';
-                } catch(e) {}
-            }, 100);
+                } catch(e) { console.warn('fs pan-zoom init error', e); }
+            }, 150);
         }
         function closeMermaidFullscreen() {
             document.getElementById('mermaid-fs-overlay').classList.remove('active');