Edit the whole dashboard, and let the grid follow its canvas

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

frontend/src/components/Common/UplotChart.tsx

@@ -2,6 +2,11 @@ import { useEffect, useLayoutEffect, useRef } from "react"
 import uPlot from "uplot"
 import "uplot/dist/uPlot.min.css"
 
+// After uPlot's own sheet, and beside this component rather than in the
+// dashboard chunk: a chart on Health or Home is styled without a dashboard
+// having been visited first.
+import "./uplot.css"
+
 import type { HistoryPoint } from "@/client"
 import { useTheme } from "@/components/theme-provider"
 import { Skeleton } from "@/components/ui/skeleton"

frontend/src/components/Common/uplot.css

@@ -0,0 +1,48 @@
+/*
+ * 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);
+}