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/_edit_panels.html

@@ -1,34 +1,37 @@
 {# dashboard/_edit_panels.html — returned by all mutation routes and included by edit.html #}
 <div id="edit-panels" style="display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start;">
 
-  {# ── Current layout ───────────────────────────────────────────────────── #}
-  <div>
-    <div class="section-title" style="margin-bottom:0.75rem;">Current Layout</div>
+  {# ── Current layout (drag to move, drag the corner/edge to resize) ──────── #}
+  <div style="min-width:0;">
+    <div style="display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;">
+      <div class="section-title" style="margin-bottom:0;">Current Layout</div>
+      {% if widgets %}
+      <span style="font-size:0.75rem;color:var(--text-dim);">Drag to move · drag a corner to resize · saved automatically</span>
+      {% endif %}
+    </div>
     {% if widgets %}
-    <div id="widget-sort-list" data-dash-id="{{ dashboard.id }}" style="display:grid;gap:0.5rem;">
+    <div class="grid-stack" data-dash-id="{{ dashboard.id }}">
       {% for item in widgets %}
-      <div class="card" data-widget-id="{{ item.db.id }}"
-           style="margin-bottom:0;display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;">
-
-        <div class="drag-handle" style="flex-shrink:0;cursor:grab;color:var(--text-muted);
-                                        font-size:1.1rem;line-height:1;user-select:none;"
-             title="Drag to reorder">⠿</div>
-
-        <div style="flex:1;min-width:0;">
-          <div style="font-weight:600;font-size:0.9rem;">{{ item.title }}</div>
-          <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.1rem;">{{ item.defn.description }}</div>
+      <div class="grid-stack-item" gs-id="{{ item.db.id }}"
+           gs-x="{{ item.db.grid_x }}" gs-y="{{ item.db.grid_y }}"
+           gs-w="{{ item.db.grid_w }}" gs-h="{{ item.db.grid_h }}">
+        <div class="grid-stack-item-content edit-panel">
+          <div class="panel-drag" title="Drag to move">
+            <span style="color:var(--text-muted);">⠿</span>
+            <span style="flex:1;min-width:0;font-weight:600;font-size:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                  title="{{ item.title }}">{{ item.title }}</span>
+            <button hx-post="/d/{{ dashboard.id }}/edit/remove/{{ item.db.id }}"
+                    hx-target="#edit-panels" hx-swap="outerHTML"
+                    class="btn btn-danger btn-sm" style="flex-shrink:0;">Remove</button>
+          </div>
+          <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.35rem;overflow:hidden;">{{ item.defn.description }}</div>
         </div>
-
-        <button hx-post="/d/{{ dashboard.id }}/edit/remove/{{ item.db.id }}"
-                hx-target="#edit-panels" hx-swap="outerHTML"
-                class="btn btn-danger btn-sm" style="flex-shrink:0;">Remove</button>
-
       </div>
       {% endfor %}
     </div>
     {% else %}
     <div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;font-size:0.9rem;">
-      No widgets yet. Draw one from the right to begin.
+      No widgets yet. Add one from the right to begin.
     </div>
     {% endif %}
   </div>