generated from coulomb/repo-seed
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>
This commit is contained in:
@@ -150,15 +150,16 @@ const _kpiBox = html`<div class="kpi-infobox">
|
|||||||
|
|
||||||
withDocHelp(_kpiBox, "/docs/decisions-kpi");
|
withDocHelp(_kpiBox, "/docs/decisions-kpi");
|
||||||
|
|
||||||
// ── Header: live indicator (left) + KPI box (right) ────────────────────────
|
// ── Fixed sidebar — stays in viewport top-right corner while scrolling ──────
|
||||||
display(html`<div class="decisions-header">
|
display(html`<div class="kpi-sidebar-outer">${_kpiBox}</div>`);
|
||||||
<div class="live-indicator">
|
```
|
||||||
<span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
|
|
||||||
${_ok
|
```js
|
||||||
? `Live · updated ${_ts?.toLocaleTimeString()}`
|
display(html`<div class="live-indicator">
|
||||||
: html`<span style="color:red">Offline — run: <code>make api</code></span>`}
|
<span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
|
||||||
</div>
|
${_ok
|
||||||
${_kpiBox}
|
? `Live · updated ${_ts?.toLocaleTimeString()}`
|
||||||
|
: html`<span style="color:red">Offline — run: <code>make api</code></span>`}
|
||||||
</div>`);
|
</div>`);
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -352,19 +353,21 @@ if (escalated.length > 0) {
|
|||||||
```
|
```
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* ── Page header ──────────────────────────────────────────────────────────── */
|
/* ── Fixed KPI sidebar ────────────────────────────────────────────────────── */
|
||||||
.decisions-header {
|
.kpi-sidebar-outer {
|
||||||
display: flex;
|
position: fixed;
|
||||||
justify-content: space-between;
|
top: 3.75rem;
|
||||||
align-items: flex-start;
|
right: 1.5rem;
|
||||||
margin-bottom: 1.25rem;
|
width: 215px;
|
||||||
gap: 1.5rem;
|
z-index: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Live indicator ───────────────────────────────────────────────────────── */
|
||||||
.live-indicator {
|
.live-indicator {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: gray;
|
color: gray;
|
||||||
padding-top: 0.3rem;
|
text-align: right;
|
||||||
flex-shrink: 0;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── KPI infobox ──────────────────────────────────────────────────────────── */
|
/* ── KPI infobox ──────────────────────────────────────────────────────────── */
|
||||||
|
|||||||
Reference in New Issue
Block a user