support no-script on status page

apps/status/src/static/app.css

@@ -87,13 +87,14 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
 .uptime-cell.warn   .value { color: var(--bar-partial); }
 .uptime-cell.bad    .value { color: var(--bar-down); }
 .uptime-cell.empty  .value { color: var(--muted); }
-/* Header row is always clickable; detail panel collapses/expands. */
+/* Header row is always clickable; detail panel collapses/expands via hidden checkbox. */
+.monitor-toggle { display: none; }
 .monitor-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; background: transparent; border: none; color: inherit; width: 100%; text-align: left; font-family: inherit; font-size: inherit; }
 .monitor-row:hover { background: rgba(255,255,255,0.02); }
 .monitor-row .chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
-.monitor.expanded-state .monitor-row .chev { transform: rotate(90deg); }
+.monitor-toggle:checked ~ .monitor-row .chev { transform: rotate(90deg); }
 .monitor-detail { padding: 0 1.25rem 1rem; border-top: 1px solid var(--border); display: none; }
-.monitor.expanded-state .monitor-detail { display: block; padding-top: 1rem; }
+.monitor-toggle:checked ~ .monitor-detail { display: block; padding-top: 1rem; }
 .regions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.75rem; }
 .region { padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); }
 .region.up { color: var(--green); border-color: rgba(16,185,129,0.3); }

apps/status/src/static/expand.js

@@ -1,24 +1,11 @@
 // Public status page client JS:
-//   1. Click any monitor row to collapse/expand its detail panel.
+//   Bar tooltips - hover any heartbeat bar to see the bucket time range and uptime breakdown.
-//   2. Hover any heartbeat bar to see the bucket time range and uptime breakdown.
+// Expand/collapse is pure CSS (hidden checkbox + :checked sibling selector), no JS needed.
-// All monitor detail HTML is server-rendered; this script only toggles a CSS
+// Reads its config from window.PINGQL_PAGE.
-// class on click. Reads its config from window.PINGQL_PAGE.
 (function () {
   var cfg = window.PINGQL_PAGE || {};
   var barFrequency = cfg.bar_frequency || "daily";
 
-  // ── Click to expand/collapse ──────────────────────────────────────────
-  var rows = document.querySelectorAll(".monitor .monitor-row");
-  for (var r = 0; r < rows.length; r++) {
-    (function (row) {
-      var card = row.parentElement;
-      row.addEventListener("click", function () {
-        var isOpen = card.classList.toggle("expanded-state");
-        row.setAttribute("aria-expanded", isOpen ? "true" : "false");
-      });
-    })(rows[r]);
-  }
-
   // ── Bar tooltips ──────────────────────────────────────────────────────
   var tooltip = document.getElementById("bar-tooltip");
   if (!tooltip) return;

apps/status/src/views/page.ejs

@@ -196,8 +196,9 @@
           // whether the detail panel starts expanded or collapsed.
           const startsOpen = m.display_mode !== 'compact';
         %>
-          <div class="monitor<%= startsOpen ? ' expanded-state' : '' %>" data-monitor-id="<%= m.id %>">
+          <div class="monitor" data-monitor-id="<%= m.id %>">
-            <button type="button" class="monitor-row" aria-expanded="<%= startsOpen ? 'true' : 'false' %>">
+            <input type="checkbox" class="monitor-toggle" id="m-<%= m.id %>" <%= startsOpen ? 'checked' : '' %>>
+            <label class="monitor-row" for="m-<%= m.id %>">
               <div class="monitor-name">
                 <span class="dot" style="background: <%= statusColor(m.current_state) %>;"></span>
                 <span class="name"><%= m.display_name %></span>
@@ -211,7 +212,7 @@
                 <% } %>
                 <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
               </div>
-            </button>
+            </label>
             <div class="monitor-detail">
               <div class="bars" aria-label="<%= statusLabel(m.current_state) %>">
                 <% buckets.forEach(function(b) { %>