generated from coulomb/repo-seed
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user