Lift the chart window out of the Sleep panel

It governs nearly every panel on the page — the training grid, the timing
charts, both sleep patterns, the counts panel, all three walk views — but it
sat inside Sleep, so it read as a sleep setting. That was already the reason
its old home carried a comment explaining it was not one; a control needing a
comment to deny what its position says is in the wrong position.

It now has its own row under the quick actions, above the first panel that
reads it, with a "Charts cover" label to say what it does. The row skips the
card chrome: it is a control, not content, and giving it a section's surface
and shadow would have made it look like a panel with nothing in it.

No JS change — both the click wiring and renderChartWindow address the buttons
by class, so they never cared where the picker lived.

Also removes that old comment, which had stopped being wrong about the picker
and started being wrong about the panel: the walks move carried it along by
accident and left it sitting above Weight, explaining a control three panels
away.
This commit is contained in:
Alexander Heldt
2026-09-01 07:58:14 +00:00
parent 1c591bfb99
commit 31e04fb9a1
3 changed files with 32 additions and 9 deletions
+18
View File
@@ -721,11 +721,29 @@ dialog menu {
.time-row input { flex: 1 1 120px; min-width: 0; }
.time-row button { padding: 8px 12px; }
/* The chart window is a page-level control rather than a panel's, so its row
skips the card chrome the sections have: no surface, no shadow, just a label
and the buttons sitting on the page background between two cards. */
.chart-window {
display: flex;
align-items: center;
gap: 10px;
padding: 0 4px;
}
.chart-window-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.chart-days-picker {
display: flex;
gap: 6px;
margin: -4px 0 14px;
}
/* No heading above it out here, so nothing to pull up under or clear beneath. */
.chart-window .chart-days-picker { margin: 0; }
.chart-days-picker button {
padding: 5px 12px;
font-size: 0.8rem;