Replace inline expand with modal for data-type About panels

- Remove click-to-expand inline panels that pushed page content down
- Hover over ▶ About still shows a brief one-line tooltip (CSS only)
- Click opens a centred modal with the full column definitions;
closes via ✕ button, backdrop click, or Escape key
- Modal content defined in JS (ABOUT map) to keep HTML clean

https://claude.ai/code/session_01TrCrzZmWbQscJiAQaW7Rg8

app/static/css/style.css

@@ -122,12 +122,6 @@ select:disabled, input:disabled {
   padding-top: 0.2rem;
 }
 
-.check-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
 .check-row-header {
   display: flex;
   align-items: center;
@@ -202,24 +196,73 @@ select:disabled, input:disabled {
 
 .about-toggle:hover::after { opacity: 1; }
 
-/* Expandable about panel */
-.check-about {
-  margin-top: 0.55rem;
-  padding: 0.7rem 0.85rem;
-  background: rgba(255,255,255,0.025);
+/* ── About modal ── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  backdrop-filter: blur(3px);
+}
+
+.modal-card {
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  font-size: 0.78rem;
+  max-width: 660px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--surface);
+  z-index: 1;
+}
+
+.modal-header h3 {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.modal-close {
+  background: none;
+  border: none;
   color: var(--text-muted);
-  line-height: 1.6;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  line-height: 1;
+  transition: color 0.15s, background 0.15s;
 }
+.modal-close:hover { color: var(--text); background: var(--surface2); }
 
-.about-source {
-  font-size: 0.75rem;
-  margin-bottom: 0.6rem;
+.modal-body {
+  padding: 1rem 1.25rem 1.25rem;
+  font-size: 0.82rem;
   color: var(--text-muted);
+  line-height: 1.65;
 }
 
+.about-source {
+  font-size: 0.78rem;
+  margin-bottom: 0.85rem;
+  color: var(--text-muted);
+}
 .about-source strong { color: var(--text); }
 
 /* ── Buttons ── */

app/static/index.html

@@ -49,62 +49,20 @@
         <label>Data Types</label>
         <div class="data-type-group">
 
-          <div class="check-row">
-            <div class="check-row-header">
-              <label class="check-label">
-                <input type="checkbox" id="chk-scada" checked />
-                4-second SCADA
-              </label>
-              <button class="about-toggle" data-tip="4-sec power output &amp; quality flags from AEMO FPP Daily (PUBLIC_NEXT_DAY_FPPMW). Available from 28 Feb 2025." aria-expanded="false" aria-controls="about-scada">▶ About</button>
-            </div>
-            <div class="check-about hidden" id="about-scada">
-              <p class="about-source">Source: <strong>PUBLIC_NEXT_DAY_FPPMW</strong> (FPP Daily) &nbsp;·&nbsp; Available from <strong>28 Feb 2025</strong></p>
-              <div class="col-defs">
-                <div class="col-def">
-                  <span class="col-name">INTERVAL_DATETIME</span>
-                  <span class="col-desc">Target 4-second grid slot (YYYY/MM/DD HH:MM:SS). Each measurement is snapped to the nearest standard interval.</span>
-                </div>
-                <div class="col-def">
-                  <span class="col-name">MEASUREMENT_DATETIME</span>
-                  <span class="col-desc">Actual timestamp the SCADA reading was recorded. May differ slightly from <code>INTERVAL_DATETIME</code> due to communication latency.</span>
-                </div>
-                <div class="col-def">
-                  <span class="col-name">MEASURED_MW</span>
-                  <span class="col-desc">Instantaneous power (MW). Positive = discharging (generation), negative = charging (load).</span>
-                </div>
-                <div class="col-def">
-                  <span class="col-name">MW_QUALITY_FLAG</span>
-                  <span class="col-desc">Data health code — <strong style="color:var(--good)">0</strong> Good · <strong style="color:var(--suspect)">1</strong> Substituted · <strong style="color:var(--bad)">2</strong> Bad · <strong style="color:var(--na)">3</strong> Manual Override.</span>
-                </div>
-              </div>
-            </div>
+          <div class="check-row-header" style="margin-bottom:0">
+            <label class="check-label">
+              <input type="checkbox" id="chk-scada" checked />
+              4-second SCADA
+            </label>
+            <button class="about-toggle" data-tip="4-sec power output &amp; quality flags · PUBLIC_NEXT_DAY_FPPMW · from 28 Feb 2025" data-about="scada">▶ About</button>
           </div>
 
-          <div class="check-row">
-            <div class="check-row-header">
-              <label class="check-label">
-                <input type="checkbox" id="chk-energy" checked />
-                5-minute Dispatch
-              </label>
-              <button class="about-toggle" data-tip="5-min dispatch energy storage &amp; MW from AEMO DISPATCH_UNIT_SOLUTION. Available from 11 Feb 2025." aria-expanded="false" aria-controls="about-energy">▶ About</button>
-            </div>
-            <div class="check-about hidden" id="about-energy">
-              <p class="about-source">Source: <strong>DISPATCH_UNIT_SOLUTION</strong> via Next_Day_Dispatch &nbsp;·&nbsp; Available from <strong>11 Feb 2025</strong></p>
-              <div class="col-defs">
-                <div class="col-def">
-                  <span class="col-name">INITIALMW</span>
-                  <span class="col-desc">Actual power output (MW) at the exact start of the 5-minute dispatch interval. Used as the baseline for the next dispatch instruction.</span>
-                </div>
-                <div class="col-def">
-                  <span class="col-name">INITIAL_ENERGY_STORAGE</span>
-                  <span class="col-desc">State of Energy (SoE) at interval start (MWh) — energy physically available in the battery before dispatch began.</span>
-                </div>
-                <div class="col-def">
-                  <span class="col-name">ENERGY_STORAGE</span>
-                  <span class="col-desc">Target energy level at interval end (MWh) — accounts for scheduled charging or discharging during the 5-minute block.</span>
-                </div>
-              </div>
-            </div>
+          <div class="check-row-header">
+            <label class="check-label">
+              <input type="checkbox" id="chk-energy" checked />
+              5-minute Dispatch
+            </label>
+            <button class="about-toggle" data-tip="5-min energy storage &amp; dispatch MW · DISPATCH_UNIT_SOLUTION · from 11 Feb 2025" data-about="energy">▶ About</button>
           </div>
 
         </div>
@@ -329,6 +287,17 @@
   </div>
 </footer>
 
+<!-- ── About modal ── -->
+<div id="about-modal" class="modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+  <div class="modal-card">
+    <div class="modal-header">
+      <h3 id="modal-title"></h3>
+      <button id="modal-close" class="modal-close" aria-label="Close">✕</button>
+    </div>
+    <div class="modal-body" id="modal-body"></div>
+  </div>
+</div>
+
 <script src="/static/js/app.js"></script>
 </body>
 </html>

app/static/js/app.js

@@ -86,15 +86,82 @@ async function init() {
   chkEnergy.addEventListener('change', onCheckboxChange);
   btnLoad.addEventListener('click', onLoad);
 
-  // ▶ About toggles
+  // ▶ About modal
+  const aboutModal  = document.getElementById('about-modal');
+  const modalTitle  = document.getElementById('modal-title');
+  const modalBody   = document.getElementById('modal-body');
+
+  const ABOUT = {
+    scada: {
+      title: '4-second SCADA  ·  PUBLIC_NEXT_DAY_FPPMW',
+      html: `
+        <p class="about-source">
+          Source: <strong>PUBLIC_NEXT_DAY_FPPMW</strong> (FPP Daily)
+          &nbsp;·&nbsp; Available from <strong>28 Feb 2025</strong>
+        </p>
+        <div class="col-defs">
+          <div class="col-def">
+            <span class="col-name">INTERVAL_DATETIME</span>
+            <span class="col-desc">Target 4-second grid slot (YYYY/MM/DD HH:MM:SS). Each measurement is snapped to the nearest standard interval.</span>
+          </div>
+          <div class="col-def">
+            <span class="col-name">MEASUREMENT_DATETIME</span>
+            <span class="col-desc">Actual timestamp the SCADA reading was recorded. May differ slightly from <code>INTERVAL_DATETIME</code> due to communication latency.</span>
+          </div>
+          <div class="col-def">
+            <span class="col-name">MEASURED_MW</span>
+            <span class="col-desc">Instantaneous power (MW). Positive = discharging (generation), negative = charging (load).</span>
+          </div>
+          <div class="col-def">
+            <span class="col-name">MW_QUALITY_FLAG</span>
+            <span class="col-desc">Data health code — <strong style="color:var(--good)">0</strong> Good · <strong style="color:var(--suspect)">1</strong> Substituted · <strong style="color:var(--bad)">2</strong> Bad · <strong style="color:var(--na)">3</strong> Manual Override.</span>
+          </div>
+        </div>`,
+    },
+    energy: {
+      title: '5-minute Dispatch  ·  DISPATCH_UNIT_SOLUTION',
+      html: `
+        <p class="about-source">
+          Source: <strong>DISPATCH_UNIT_SOLUTION</strong> via Next_Day_Dispatch
+          &nbsp;·&nbsp; Available from <strong>11 Feb 2025</strong>
+        </p>
+        <div class="col-defs">
+          <div class="col-def">
+            <span class="col-name">INITIALMW</span>
+            <span class="col-desc">Actual power output (MW) at the exact start of the 5-minute dispatch interval. Used as the baseline for the next dispatch instruction.</span>
+          </div>
+          <div class="col-def">
+            <span class="col-name">INITIAL_ENERGY_STORAGE</span>
+            <span class="col-desc">State of Energy (SoE) at interval start (MWh) — energy physically available in the battery before dispatch began.</span>
+          </div>
+          <div class="col-def">
+            <span class="col-name">ENERGY_STORAGE</span>
+            <span class="col-desc">Target energy level at interval end (MWh) — accounts for scheduled charging or discharging during the 5-minute block.</span>
+          </div>
+        </div>`,
+    },
+  };
+
+  function openAboutModal(key) {
+    const data = ABOUT[key];
+    modalTitle.textContent = data.title;
+    modalBody.innerHTML    = data.html;
+    aboutModal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeAboutModal() {
+    aboutModal.classList.add('hidden');
+    document.body.style.overflow = '';
+  }
+
   document.querySelectorAll('.about-toggle').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const panel    = document.getElementById(btn.getAttribute('aria-controls'));
-      const expanded = btn.getAttribute('aria-expanded') === 'true';
-      btn.setAttribute('aria-expanded', String(!expanded));
-      panel.classList.toggle('hidden', expanded);
-      btn.textContent = expanded ? '▶ About' : '▼ About';
-    });
+    btn.addEventListener('click', () => openAboutModal(btn.dataset.about));
+  });
+  document.getElementById('modal-close').addEventListener('click', closeAboutModal);
+  aboutModal.addEventListener('click', e => { if (e.target === aboutModal) closeAboutModal(); });
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape' && !aboutModal.classList.contains('hidden')) closeAboutModal();
   });
 }