Making _sth pixel count dynamic based on window height

[LeighBerrell]

Given the likelihood that users will have a variation of screen sizes it would be great if _sth could automatically adjust to the height of the grid instead of being a fixed number of pixels. Better UX because it utilises full height available on larger screens, and avoids additional scroll bars on shorter screens, in particular laptop screens.

[LeighBerrell]

OK, working with Claude I have some code here that looks for STH=n,999 and makes that view adaptive to screen height. Seems to work well. But might be with thinking about having a similar option natively in KTL? All good though, this does what I need for me.

`/* ==================== sticky-grid.js ==================== */
/*************************************************************************
  Adaptive sticky-grid height, driven entirely by a Builder-set marker.

  HOW IT'S TRIGGERED
  -------------------
  Set _sth=,999 on any view in Knack Builder. 999 is a deliberately
  unrealistic pixel height - nobody would configure a real sticky
  height of 999px - so its presence in KTL's own generated style tag is
  used purely as a flag meaning "let this module manage this view's
  height dynamically." Any other _sth height value (e.g. _sth=,400) is
  left completely alone - KTL's native fixed-height behaviour applies,
  untouched by this module.

  This is fully deterministic and set per-view n Builder - 
  Adding the behaviour to a new grid is just setting
  its _sth value to 999; removing it is just changing that number back
  to a real height.

  HOW IT WORKS
  ------------
  KTL writes a <style id="ktl-sticky-styles-{viewId}"> tag into <head>
  containing a fixed max-height/height rule for that view. This module
  watches for those tags (via MutationObserver, since KTL injects them
  asynchronously after render), and where the height in the tag is (or
  was) 999, rewrites it to whatever's actually available in the
  viewport - shrinking on short screens, growing on tall ones - instead
  of the fixed 999 KTL wrote.

  Once a view is confirmed as a 999-marked view, it stays managed for
  the rest of the session even after its tag no longer literally reads
  999 (since this module immediately overwrites it with the real
  computed height) - tracked in expandViews below, populated purely by
  observation.
*************************************************************************/

(function () {

  var TRIGGER_HEIGHT = 999;
  var MIN_HEIGHT      = 150; // never shrink below this - always shows a couple of rows
  var BOTTOM_BUFFER   = 24;  // breathing room between the grid and the viewport edge

  // Populated automatically the first time a view's tag shows the 999
  // trigger value - not hand-maintained.
  var expandViews = {};

  // -- Core: rewrite one view's KTL-injected style tag ----------------------
  function applyAdaptiveHeight(viewId) {
    var styleEl = document.getElementById('ktl-sticky-styles-' + viewId);
    if (!styleEl) return;

    var css = styleEl.textContent;

    var ruleMatch = css.match(/([^{}]+)\{[^{}]*?((?:max-)?height):\s*(\d+)px/);
    if (!ruleMatch) return;

    var selector   = ruleMatch[1].trim();
    var heightProp = ruleMatch[2];
    var currentPx  = parseInt(ruleMatch[3], 10);

    var isMarked = expandViews[viewId] || currentPx === TRIGGER_HEIGHT;
    if (!isMarked) return; // not a 999-marked view - leave KTL's own value alone

    expandViews[viewId] = true;

    var target = document.querySelector(selector);
    if (!target) return;

    var top = target.getBoundingClientRect().top;
    var available = Math.max(window.innerHeight - top - BOTTOM_BUFFER, MIN_HEIGHT);

    var newHeight = Math.round(available);
    if (newHeight === currentPx) return; // nothing changed, skip the DOM write

    var newCss = css.replace(/((?:max-)?height):\s*\d+px/, '$1: ' + newHeight + 'px');
    styleEl.textContent = newCss;
  }

  function applyAllKnown() {
    Object.keys(expandViews).forEach(applyAdaptiveHeight);
  }

  function viewIdFromStyleNodeId(id) {
    return id.indexOf('ktl-sticky-styles-') === 0 ? id.slice('ktl-sticky-styles-'.length) : null;
  }

  // -- Catch KTL injecting or rewriting a sticky-style tag, for ANY view ----
  var pendingViewIds = {};
  var scheduled = false;
  function scheduleApply(viewId) {
    pendingViewIds[viewId] = true;
    if (scheduled) return;
    scheduled = true;
    setTimeout(function () {
      scheduled = false;
      var ids = Object.keys(pendingViewIds);
      pendingViewIds = {};
      ids.forEach(applyAdaptiveHeight);
    }, 50);
  }

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (m) {
      if (m.type === 'childList') {
        Array.prototype.forEach.call(m.addedNodes, function (node) {
          var viewId = node && node.id && viewIdFromStyleNodeId(node.id);
          if (viewId) scheduleApply(viewId);
        });
      } else if (m.type === 'characterData') {
        var el = m.target.parentElement;
        var viewId = el && el.id && viewIdFromStyleNodeId(el.id);
        if (viewId) scheduleApply(viewId);
      }
    });
  });
  observer.observe(document.head, { childList: true, subtree: true, characterData: true });

  // -- Belt-and-braces: also reapply after any view's render events --------
  // Only actually does anything for views already confirmed as 999-marked
  // (see isMarked check above) - harmless no-op for everything else.
  $(document).on('knack-view-render.any knack-records-render.any', function (event, view) {
    var viewId = view && view.key;
    if (!viewId) return;
    setTimeout(function () { applyAdaptiveHeight(viewId); }, 300);
  });

  // -- Recalculate on resize, debounced (same pattern as calendar.js) ------
  var resizeTimer;
  $(window).on('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(applyAllKnown, 300);
  });

  // -- Initial pass: scan whatever KTL tags already exist on load ----------
  function scanExisting() {
    var nodes = document.querySelectorAll('[id^="ktl-sticky-styles-"]');
    Array.prototype.forEach.call(nodes, function (node) {
      var viewId = viewIdFromStyleNodeId(node.id);
      if (viewId) applyAdaptiveHeight(viewId);
    });
  }
  scanExisting();
  setTimeout(scanExisting, 500);
  setTimeout(scanExisting, 1500);

})();`