https://trailo.io/assets/app-viz-fit.js?v=74

1/* app-viz-fit.js — keeps the 1140-wide .appviz__stage fitted to its
2   container by setting the CSS var --av-s. Robust against late layout:
3   measures on observe, on window resize, on window load, and on
4   DOMContentLoaded. Without JS the stage defaults to scale(1), which the
5   <600px media query in app-viz.css handles via a phone-only fallback. */
6(function () {
7  function getWraps() { return document.querySelectorAll('.appviz__wrap'); }
8  function fit(wrap) {
9    var stage = wrap.querySelector('.appviz__stage');
10    if (!stage) return;
11    var cw = wrap.clientWidth;
12    if (!cw) return; // not laid out yet — wait for ResizeObserver/load
13    // Stage's untransformed layout width: 1140 on the desktop artboard, 392 on
14    // the ≤600px phone-only artboard. offsetWidth ignores the scale transform,
15    // so it stays stable and adapts to whichever media query is active.
16    // Cap at 1 so the phone never upscales past its native size.
17    var sw = stage.offsetWidth || 1140;
18    stage.style.setProperty('--av-s', Math.min(1, cw / sw));
19  }
20  function fitAll() {
21    var wraps = getWraps();
22    for (var i = 0; i < wraps.length; i++) fit(wraps[i]);
23  }
24  function setup() {
25    var wraps = getWraps();
26    if (!wraps.length) return;
27    fitAll();
28    if (typeof ResizeObserver !== 'undefined') {
29      for (var i = 0; i < wraps.length; i++) {
30        (function (w) { new ResizeObserver(function () { fit(w); }).observe(w); })(wraps[i]);
31      }
32    }
33  }
34  if (document.readyState === 'loading') {
35    document.addEventListener('DOMContentLoaded', setup);
36  } else {
37    setup();
38  }
39  // Belt-and-braces: re-measure once images/fonts have settled, and on resize.
40  window.addEventListener('load', fitAll);
41  window.addEventListener('resize', fitAll);
42})();