fix(app): refit the table height when a block above it or the fonts change, so the gap below stays one gutter (#70)

Author: daggerok

src/main.tsx

@@ -3950,6 +3950,13 @@ function bindEvents(): void {
   // Keep only the table scrolling: refit on viewport changes and whenever
   // the content above the table (wrapping toolbar, panels) changes height.
   window.addEventListener('resize', fitTableHeight);
+  window.addEventListener('load', fitTableHeight);
+  if (document.fonts && document.fonts.ready) void document.fonts.ready.then(fitTableHeight); // the first fit ran before the fonts were in
+  if (typeof ResizeObserver === 'function') {
+    // a block above the table that shrinks after the first fit does not change the page height (min-h-screen), only its own size tells
+    const above = new ResizeObserver(() => fitTableHeight());
+    document.querySelectorAll('main > *').forEach(child => { if (!child.contains(el.tableScroll)) above.observe(child, { box: 'border-box' }); });
+  }
   if (typeof ResizeObserver === 'function') {
     new ResizeObserver(() => fitTableHeight()).observe(document.body);
   }