dashboard: move Decision Health card into TOC sidebar column

Inject the KPI box into #observablehq-toc (the framework's right-column
aside) instead of position:fixed. The TOC column already doesn't scroll,
so no CSS tricks are needed. Falls back to a float:right inline block if
the TOC element is absent.

- Remove .kpi-sidebar-outer and its fixed positioning
- Remove min-width/max-width from .kpi-infobox; add margin-bottom to
  separate it from the TOC links below

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-26 13:29:34 +01:00
parent aab8bb1bbb
commit e56e63b1f5

View File

@@ -150,8 +150,10 @@ const _kpiBox = html`<div class="kpi-infobox">
withDocHelp(_kpiBox, "/docs/decisions-kpi");
// ── Fixed sidebar — stays in viewport top-right corner while scrolling ──────
display(html`<div class="kpi-sidebar-outer">${_kpiBox}</div>`);
// ── Inject into the TOC sidebar (right column, non-scrolling) ───────────────
const _toc = document.querySelector("#observablehq-toc");
if (_toc) _toc.prepend(_kpiBox);
else display(html`<div style="float:right;width:215px;margin-left:1rem">${_kpiBox}</div>`);
```
```js
@@ -353,15 +355,6 @@ if (escalated.length > 0) {
```
<style>
/* ── 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;
@@ -376,11 +369,9 @@ if (escalated.length > 0) {
border: 1px solid var(--theme-foreground-faint, #e0e0e0);
border-radius: 10px;
padding: 0.75rem 1rem;
min-width: 195px;
max-width: 240px;
position: relative;
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
flex-shrink: 0;
margin-bottom: 1.25rem;
}
.kpi-infobox-title {
font-size: 0.68rem;