stroblmeandClaude Opus 5
9e3093bd72
The editor only ever arranged the first section, so the demo's Home dashboard lost 16 of its 25 widgets the moment it was edited. A page's sections are now read as one arrangement — each pushed below the one before it — and written back as one, which is the shape a dashboard was already heading for: one dashboard, one canvas, and the panel rail for the several-dashboards story. The page tabs that story made dead are gone; PageDef/SectionDef stay in the schema and a page the editor does not show round-trips untouched. The row height derives from the canvas as the column width already did, so the same arrangement is the same picture on a 7" panel as on a 4K one. The uPlot rules move beside UplotChart, where a chart on Health is styled without a dashboard having been visited first, and the bar's readout travels on one property instead of jumping sides at 30%. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018tULRZJUkZsw7rMJ3h4xvu
49 lines
1.2 KiB
CSS
49 lines
1.2 KiB
CSS
/*
|
|
* uPlot, routed through the design tokens.
|
|
*
|
|
* Beside `UplotChart.tsx` and imported by it, so every chart is styled wherever
|
|
* it is drawn. These rules used to live in the dashboard's own CSS chunk, which
|
|
* left a chart on Health or Home unstyled until a dashboard had been visited in
|
|
* that session.
|
|
*
|
|
* Its own legend is the hover readout as well — the value each line carried at
|
|
* the cursor — so it is styled as chart furniture rather than replaced.
|
|
*/
|
|
|
|
.u-legend {
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Series labels default to the message name, which has no spaces to break at
|
|
— and a table cannot lay out below its min-content width. */
|
|
.u-legend th {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.u-legend .u-marker {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-width: 2px;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.u-legend .u-value {
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.u-legend .u-series.u-off {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.u-cursor-x,
|
|
.u-cursor-y {
|
|
border-color: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
|
|
}
|
|
|
|
.u-select {
|
|
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
|
}
|