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/dashboard/share_view.html

@@ -55,6 +55,15 @@
     .ping-cur-nd   { color:var(--text-dim); }
     .widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
     .widget-title { font-family:var(--font-serif); font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
+    /* Same Grafana-style grid as the authenticated view, rendered from x/y/w/h. */
+    .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; }
+    }
     .stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
     .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
     header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-mid); height: 48px; font-family: var(--font-serif); }
@@ -72,14 +81,16 @@
 
 <main>
   {% if widgets %}
-  <div style="column-width:380px;column-count:3;column-gap:1rem;">
+  <div class="dash-grid">
     {% for item in widgets %}
-    <div class="card ping-card" style="break-inside:avoid;margin-bottom:1rem;">
+    {% set gw = item.db %}
+    <div class="card ping-card dash-cell"
+         style="grid-column:{{ gw.grid_x + 1 }} / span {{ gw.grid_w }};grid-row:{{ gw.grid_y + 1 }} / span {{ gw.grid_h }};">
       <div class="widget-header">
-        <span class="widget-title">{{ item.title }}</span>
+        <span class="widget-title" title="{{ item.title }}">{{ item.title }}</span>
       </div>
       {# Pass share token as &s= param so require_role allows through #}
-      <div id="widget-{{ item.db.id }}"
+      <div class="dash-cell-body" id="widget-{{ gw.id }}"
            hx-get="{{ item.hx_url }}&s={{ raw_token }}"
            hx-trigger="load{% if item.defn.poll %}, every {{ poll_interval }}s{% endif %}"
            hx-swap="innerHTML">