From bc2387831dceff28f5f23165d4b155113f0ed38c Mon Sep 17 00:00:00 2001 From: s0lray Date: Thu, 26 Mar 2026 19:08:55 -0400 Subject: [PATCH] Zoom to fill viewport on mobile initial load (THE-119) Adjust the SVG viewBox on mobile to match the actual rendered aspect ratio instead of the fixed 1280x800 landscape ratio. The previous implementation computed the zoom scale against the viewBox dimensions, but on a tall/narrow mobile screen with min-height: 60vh the SVG element is much taller than the viewBox maps to with xMidYMid meet. By stretching the viewBox to match the real element proportions, the tree's vertical extent now has proper headroom and the initial zoom fills the viewport as expected. Co-Authored-By: Paperclip --- public/js/arf.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/public/js/arf.js b/public/js/arf.js index d83ae7b..3dce43b 100644 --- a/public/js/arf.js +++ b/public/js/arf.js @@ -84,8 +84,16 @@ d3.json("arf.json").then(function(json) { root.children.forEach(collapse); - // On mobile, pre-compute zoom so the collapsed tree fills the viewport. + // On mobile, stretch the viewBox to match the actual rendered aspect ratio + // so the zoom-to-fill calculation uses the real visible area, not the + // fixed 1280x800 letterboxed region. if (window.innerWidth <= 768) { + var rect = svgEl.node().getBoundingClientRect(); + if (rect.width && rect.height) { + svgH = Math.round(svgW * (rect.height / rect.width)); + svgEl.attr("viewBox", "0 0 " + svgW + " " + svgH); + } + // Run tree layout to get final node positions, then compute zoom from data. tree(root); root.descendants().forEach(function(d) { d.y = d.depth * 180; }); @@ -97,7 +105,7 @@ d3.json("arf.json").then(function(json) { if (d.y < minY) minY = d.y; if (d.y > maxY) maxY = d.y; }); - var pad = 60; + var pad = 40; var bw = (maxY - minY) || 1; var bh = (maxX - minX) || 1; var k = Math.min((svgW - pad * 2) / bw, (svgH - pad * 2) / bh, 3);