From aab8bb1bbb740e0ab9188869e5b9c65287e2af89 Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Thu, 26 Feb 2026 12:07:49 +0100
Subject: [PATCH] dashboard: fix KPI sidebar to fixed top-right position

- `.kpi-sidebar-outer` is now `position: fixed; top: 3.75rem; right: 1.5rem;`
  so the Decision Health box stays visible while scrolling
- Re-adds the live indicator as a standalone cell (was accidentally dropped
  when the combined `decisions-header` flex layout was removed)
- CSS: replaces `.decisions-header` block with `.kpi-sidebar-outer`;
  `.live-indicator` is now standalone (text-align right, margin-bottom)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 dashboard/src/decisions.md | 39 ++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/dashboard/src/decisions.md b/dashboard/src/decisions.md
index 6553e11..72abba1 100644
--- a/dashboard/src/decisions.md
+++ b/dashboard/src/decisions.md
@@ -150,15 +150,16 @@ const _kpiBox = html`<div class="kpi-infobox">
 
 withDocHelp(_kpiBox, "/docs/decisions-kpi");
 
-// ── Header: live indicator (left) + KPI box (right) ────────────────────────
-display(html`<div class="decisions-header">
-  <div class="live-indicator">
-    <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
-    ${_ok
-      ? `Live · updated ${_ts?.toLocaleTimeString()}`
-      : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
-  </div>
-  ${_kpiBox}
+// ── Fixed sidebar — stays in viewport top-right corner while scrolling ──────
+display(html`<div class="kpi-sidebar-outer">${_kpiBox}</div>`);
+```
+
+```js
+display(html`<div class="live-indicator">
+  <span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
+  ${_ok
+    ? `Live · updated ${_ts?.toLocaleTimeString()}`
+    : html`<span style="color:red">Offline — run: <code>make api</code></span>`}
 </div>`);
 ```
 
@@ -352,19 +353,21 @@ if (escalated.length > 0) {
 ```
 
 <style>
-/* ── Page header ──────────────────────────────────────────────────────────── */
-.decisions-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1.25rem;
-  gap: 1.5rem;
+/* ── Fixed KPI sidebar ────────────────────────────────────────────────────── */
+.kpi-sidebar-outer {
+  position: fixed;
+  top: 3.75rem;
+  right: 1.5rem;
+  width: 215px;
+  z-index: 500;
 }
+
+/* ── Live indicator ───────────────────────────────────────────────────────── */
 .live-indicator {
   font-size: 0.8rem;
   color: gray;
-  padding-top: 0.3rem;
-  flex-shrink: 0;
+  text-align: right;
+  margin-bottom: 0.75rem;
 }
 
 /* ── KPI infobox ──────────────────────────────────────────────────────────── */