feat(dashboard): widgets fit their content; wide screens get more grid columns (#5249)

Each widget is as tall as its content, never taller than its saved height
(where it scrolls). The dashboard is capped at 2400px instead of 1400px.
Past 12 columns' worth of width it adds columns (one per 110px, up to 24)
and places widgets again in reading order at their saved widths, so more sit
side by side instead of stretching. Edit mode shows and saves the
12-column layout, so a layout doesn't depend on the screen it was edited on.

The share view uses the same layout code (static/dash-layout.js).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

steward/templates/dashboard/index.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ dashboard.name }} — Steward{% endblock %}
+{% block main_class %} class="main-wide"{% endblock %}
 {% block head %}
 {# Gridstack renders the grid for everyone (static for viewers); editors also get
    the in-place drag-resize + bottom drawer. #}
@@ -56,22 +57,63 @@
 {% block extra_scripts %}
 <script src="{{ url_for('static', filename='vendor/gridstack-12.6.0-all.min.js') }}"></script>
 <script src="{{ url_for('static', filename='dash-cells.js') }}"></script>
+<script src="{{ url_for('static', filename='dash-layout.js') }}"></script>
 <script>
 (function () {
   var gridEl = document.querySelector('.grid-stack');
   if (!gridEl || typeof GridStack === 'undefined') return;
   var dashId = gridEl.dataset.dashId;
   var canEdit = gridEl.dataset.canEdit === '1';
-  var editing = false;
+  var editing = false;                          // edit mode: the saved layout, draggable
 
+  var L = window.StewardDashLayout;
+  var CELL_PX = 70, MARGIN_PX = 8;
   var grid = GridStack.init({
-    column: 12, cellHeight: 70, margin: 8, float: false,
+    column: 12, cellHeight: CELL_PX, margin: MARGIN_PX, float: false,
     staticGrid: true,                          // view mode: positioned but inert
     handle: '.panel-drag',
     resizable: { handles: 'e, se, s' },
-    columnOpts: { breakpointForWindow: true, breakpoints: [{ w: 700, c: 1 }] },
   }, gridEl);
 
+  function items() { return Array.prototype.slice.call(gridEl.querySelectorAll('.grid-stack-item')); }
+
+  // View mode: each widget at its content height (never above its saved one),
+  // placed for this screen's column count (static/dash-layout.js).
+  function relayout() {
+    if (editing) return;
+    var cols = L.columnsFor(gridEl.clientWidth);
+    var els = items();
+    var pos = L.pack(els.map(function (el) {
+      var s = L.saved(el);
+      s.id = el.getAttribute('gs-id');
+      s.h = el._fitH || s.h;
+      return s;
+    }), cols);
+    grid.batchUpdate();
+    if (grid.getColumn() !== cols) grid.column(cols, 'none');
+    els.forEach(function (el) { grid.update(el, pos[el.getAttribute('gs-id')]); });
+    grid.batchUpdate(false);
+  }
+  var pending = null;
+  function relayoutSoon() { clearTimeout(pending); pending = setTimeout(relayout, 60); }
+
+  function fit(el) {
+    var box = el.querySelector('.grid-stack-item-content');
+    if (!box) return;
+    var rows = L.fitRows(box, CELL_PX, 2 * MARGIN_PX, L.saved(el).h);
+    if (rows !== el._fitH) { el._fitH = rows; relayoutSoon(); }
+  }
+  document.body.addEventListener('htmx:afterSettle', function (e) {
+    var el = e.detail.target && e.detail.target.closest && e.detail.target.closest('.grid-stack-item');
+    if (el && !editing) fit(el);
+  });
+  // A new column count changes widths, so text wraps differently: fit again.
+  window.addEventListener('resize', function () {
+    clearTimeout(window._dashResize);
+    window._dashResize = setTimeout(function () { relayout(); items().forEach(fit); }, 150);
+  });
+  relayout();
+
   if (!canEdit) return;                         // viewers get the static grid only
   var csrf = document.querySelector('meta[name="csrf-token"]').content;
 
@@ -79,6 +121,10 @@
     var items = grid.save(false).map(function (n) {
       return { id: parseInt(n.id, 10), x: n.x, y: n.y, w: n.w, h: n.h };
     });
+    items.forEach(function (n) {               // what's saved is the new cap
+      var el = gridEl.querySelector('.grid-stack-item[gs-id="' + n.id + '"]');
+      if (el) { el.dataset.x = n.x; el.dataset.y = n.y; el.dataset.w = n.w; el.dataset.h = n.h; }
+    });
     fetch('/d/' + dashId + '/edit/layout', {
       method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
       body: JSON.stringify({ items: items }),
@@ -86,12 +132,23 @@
   }
   grid.on('change', function () { if (editing) saveLayout(); });
 
+  // Edit mode shows the saved 12-column layout at saved heights, so a layout
+  // edited on a wide screen is the same one a narrow screen starts from.
+  function showSaved() {
+    grid.batchUpdate();
+    if (grid.getColumn() !== L.MIN_COLS) grid.column(L.MIN_COLS, 'none');
+    items().forEach(function (el) { grid.update(el, L.saved(el)); });
+    grid.batchUpdate(false);
+  }
+
   function setEditing(on) {
+    if (on) showSaved();                        // before the flag: restoring isn't an edit to save
     editing = on;
     grid.setStatic(!on);
     document.body.classList.toggle('dash-editing', on);
     var btn = document.getElementById('dash-edit-toggle');
     if (btn) btn.textContent = on ? 'Done' : 'Edit';
+    if (!on) { items().forEach(fit); relayout(); }
   }
   var toggle = document.getElementById('dash-edit-toggle');
   if (toggle) toggle.addEventListener('click', function () { setEditing(!editing); });
@@ -129,7 +186,7 @@
     var item = rm.closest('.grid-stack-item');
     fetch('/d/' + dashId + '/edit/remove/' + rm.dataset.remove,
           { method: 'POST', headers: { 'X-CSRF-Token': csrf } })
-      .then(function () { if (item) grid.removeWidget(item); });
+      .then(function () { if (item) grid.removeWidget(item); relayoutSoon(); });
   });
 
   // Deep link: /d/<id>?edit=1 opens straight into edit mode (new dashboards do this).