truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-25 07:40:19 +03:00
parent 98355a5286
commit e9ddc3d332
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/proposals/show.blade.php
+28 -10
View File
@@ -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, {