feat(dashboard): phase B drag-resize grid (Gridstack) replacing masonry

Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets:
- DashboardWidget: replace `position` with a 12-col grid placement
  (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position
  order into a 3-up grid (4 cols x 4 cells each) and drops position.
- View + share render a static CSS grid from x/y/w/h: fixed cell height
  (h * 70px) with the body scrolling, so the arranged layout is what's shown;
  collapses to a single column under 820px.
- Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar
  to move, drag a corner/edge to resize; every change autosaves to a new
  /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder.
- add_widget appends at the bottom-left; remove no longer renumbers.
  _get_widgets now orders by grid position (drives DOM + mobile fallback order).

Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an
operator visual check of the edit experience.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

steward/templates/base.html

@@ -165,6 +165,18 @@ textarea { resize: vertical; }
 .ping-meta { min-width:120px; max-width:180px; flex-shrink:1; overflow:hidden; }
 .ping-name { font-size:0.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
 a.ping-name:hover { text-decoration:underline; }
+/* Dashboard widget grid — Grafana-style 12-col layout; cells sized by drag-resize
+   (Gridstack) in the edit view and rendered statically here from each widget's
+   x/y/w/h. Cell height is fixed (h * cell unit) with the body scrolling, so the
+   layout the operator arranged is exactly what they see. */
+.dash-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:70px; gap:1rem; }
+.dash-grid > .dash-cell { margin-bottom:0; min-width:0; overflow:hidden; display:flex; flex-direction:column; }
+.dash-cell .dash-cell-body { flex:1; min-height:0; overflow:auto; }
+@media (max-width:820px) {
+  .dash-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
+  .dash-grid > .dash-cell { grid-column:1 / -1 !important; grid-row:auto !important; }
+  .dash-cell .dash-cell-body { overflow:visible; }
+}
 .ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .ping-pills { display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; align-items:center; }
 .pill { display:inline-block; width:7px; height:22px; border-radius:2px; cursor:default; transition:opacity .1s; }