From a936429accae040d898757bd9c66617901745edf Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Sun, 6 Sep 2026 21:46:01 -0400
Subject: [PATCH] Fix: update every live badge and observe elements for resize

The landing page marked two badges with the same id, so getElementById
updated only the first and the badge demo's live value never changed.
Key both live badges off data attributes and write to every match.

Pause the badge interval while the document is hidden.

Replace the window resize listeners behind the phone widget fit and the
scrollable-table affordance with ResizeObserver. Both measure elements
that resize with the content column, not with the viewport. This also
moves the table script out of a concatenated string in the Astro config
into a typed script in the Starlight head component.
---
 astro.config.mjs          | 11 ----------
 src/components/Head.astro | 25 ++++++++++++++++++++++
 src/pages/index.astro     | 45 ++++++++++++++++++---------------------
 3 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index df8cdb5..6cdf704 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -50,17 +50,6 @@ export default defineConfig({
         { tag: 'meta', attrs: { property: 'og:site_name', content: 'Stackyard' } },
         { tag: 'meta', attrs: { name: 'twitter:card', content: 'summary_large_image' } },
         { tag: 'meta', attrs: { name: 'twitter:image', content: `${SITE}/img/og.jpg` } },
-        {
-          tag: 'script',
-          content:
-            "addEventListener('DOMContentLoaded',function(){" +
-            "var boxes=document.querySelectorAll('.sy-tscroll');" +
-            "function sync(){boxes.forEach(function(b){" +
-            "if(b.scrollWidth>b.clientWidth+1){b.tabIndex=0;b.setAttribute('role','group');" +
-            "b.setAttribute('aria-label','Scrollable table');}" +
-            "else{b.removeAttribute('tabindex');b.removeAttribute('role');b.removeAttribute('aria-label');}});}" +
-            "sync();addEventListener('resize',sync);});",
-        },
       ],
 
       expressiveCode: {
diff --git a/src/components/Head.astro b/src/components/Head.astro
index 83b5098..f237756 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -35,3 +35,28 @@ const breadcrumb = {
 {pageDescription && <meta name="twitter:description" content={pageDescription} />}
 <meta property="og:image:alt" content="The Stackyard dashboard, showing app tiles and widgets" />
 <script type="application/ld+json" set:html={JSON.stringify(breadcrumb)} />
+
+<script>
+  /* A table wider than its column scrolls. A scroll container that a keyboard
+     cannot reach strands the hidden columns. */
+  const sync = (box: HTMLElement) => {
+    if (box.scrollWidth > box.clientWidth + 1) {
+      box.tabIndex = 0;
+      box.setAttribute('role', 'group');
+      box.setAttribute('aria-label', 'Scrollable table');
+    } else {
+      box.removeAttribute('tabindex');
+      box.removeAttribute('role');
+      box.removeAttribute('aria-label');
+    }
+  };
+
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) sync(entry.target as HTMLElement);
+  });
+
+  for (const box of document.querySelectorAll<HTMLElement>('.sy-tscroll')) {
+    sync(box);
+    observer.observe(box);
+  }
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 86ae79f..0058360 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -177,14 +177,14 @@ const schema = {
             <div class="cell">
               <div class="itile" style="background:#1c1c1e">
                 <img src="/icons/jellyfin.svg" alt="">
-                <span class="badge" style="background:#1d6cf5" id="jellyfinCount">2</span>
+                <span class="badge" style="background:#1d6cf5" data-live-jellyfin>2</span>
               </div>
               <span class="ilabel">Jellyfin</span>
             </div>
             <div class="cell">
               <div class="itile" style="background:#1c1c1e">
                 <img src="/icons/seerr.svg" alt="">
-                <span class="badge" style="background:#ffcc00;color:#1c1c1e" id="seerrCount">7</span>
+                <span class="badge" style="background:#ffcc00;color:#1c1c1e" data-live-seerr>7</span>
               </div>
               <span class="ilabel">Seerr</span>
             </div>
@@ -253,7 +253,7 @@ const schema = {
             </div>
           </div>
           <div class="bdemo-item">
-            <div class="banchor" style="background:#5A4636"><span class="badge" style="background:#ffcc00;color:#1c1c1e" id="seerrCount">7</span></div>
+            <div class="banchor" style="background:#5A4636"><span class="badge" style="background:#ffcc00;color:#1c1c1e" data-live-seerr>7</span></div>
             <div class="bmeta">
               <span class="bcap">Live activity</span>
               <span class="bsrc">A number from the service API</span>
@@ -401,18 +401,9 @@ function fitDemoWidgets() {
   if (cardW) demoScreen.style.setProperty('--ws', String(cardW / 170));
   if (glassW) demoScreen.style.setProperty('--nps', String(glassW / 170));
 }
-let fitQueued = false;
-function queueFitDemoWidgets() {
-  if (fitQueued) return;
-  fitQueued = true;
-  requestAnimationFrame(() => {
-    fitQueued = false;
-    fitDemoWidgets();
-  });
-}
 fitDemoWidgets();
-addEventListener('resize', queueFitDemoWidgets);
-phoneDemo.addEventListener('change', queueFitDemoWidgets);
+if (demoScreen) new ResizeObserver(fitDemoWidgets).observe(demoScreen);
+phoneDemo.addEventListener('change', fitDemoWidgets);
 
 if (reduced) {
   const strip = document.querySelector('.marquee');
@@ -420,16 +411,22 @@ if (reduced) {
 }
 
 if (!reduced) {
-  const jf = document.getElementById('jellyfinCount');
-  const sr = document.getElementById('seerrCount');
-  const srcs = document.querySelectorAll('[data-live-seerr]');
-  setInterval(() => {
-    const a = Math.max(1, 2 + Math.round((Math.random() - 0.5) * 2));
-    const b = Math.max(1, 7 + Math.round((Math.random() - 0.5) * 2));
-    if (jf) jf.textContent = a;
-    if (sr) sr.textContent = b;
-    srcs.forEach(n => { n.textContent = b; });
-  }, 3400);
+  const jellyfin = document.querySelectorAll('[data-live-jellyfin]');
+  const seerr = document.querySelectorAll('[data-live-seerr]');
+  const jitter = (base) => String(Math.max(1, base + Math.round((Math.random() - 0.5) * 2)));
+  let timer = 0;
+  const tick = () => {
+    const j = jitter(2);
+    const s = jitter(7);
+    jellyfin.forEach((n) => { n.textContent = j; });
+    seerr.forEach((n) => { n.textContent = s; });
+  };
+  const schedule = () => {
+    clearInterval(timer);
+    if (!document.hidden) timer = setInterval(tick, 3400);
+  };
+  schedule();
+  document.addEventListener('visibilitychange', schedule);
 }
     </script>
   </body>