fix(dashboard): heights fit content to 10px, not a whole 70px row; text columns read from the left (#5214)

View mode splits each saved row into seven, so a widget no longer carries up
to 69px of empty space below its content (Overview, SNMP). Edit mode and the
saved layout keep 70px rows. The Busiest Containers host column aligns left
like its header, its note fits one line, and the Hosts column reads Disk.

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

steward/templates/dashboard/index.html

@@ -68,8 +68,9 @@
 
   var L = window.StewardDashLayout;
   var CELL_PX = 70, MARGIN_PX = 8;
+  var VIEW_PX = CELL_PX / L.ROW_SPLIT;          // view mode: finer rows, so heights fit closely
   var grid = GridStack.init({
-    column: 12, cellHeight: CELL_PX, margin: MARGIN_PX, float: false,
+    column: 12, cellHeight: VIEW_PX, margin: MARGIN_PX, float: false,
     staticGrid: true,                          // view mode: positioned but inert
     handle: '.panel-drag',
     resizable: { handles: 'e, se, s' },
@@ -84,7 +85,7 @@
     var cols = L.columnsFor(gridEl.clientWidth);
     var els = items();
     var pos = L.pack(els.map(function (el) {
-      var s = L.saved(el);
+      var s = L.viewed(el);
       s.id = el.getAttribute('gs-id');
       s.h = el._fitH || s.h;
       return s;
@@ -100,7 +101,7 @@
   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);
+    var rows = L.fitRows(box, VIEW_PX, 2 * MARGIN_PX, L.viewed(el).h);
     if (rows !== el._fitH) { el._fitH = rows; relayoutSoon(); }
   }
   document.body.addEventListener('htmx:afterSettle', function (e) {
@@ -135,6 +136,7 @@
   // 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.cellHeight(CELL_PX);
     grid.batchUpdate();
     if (grid.getColumn() !== L.MIN_COLS) grid.column(L.MIN_COLS, 'none');
     items().forEach(function (el) { grid.update(el, L.saved(el)); });
@@ -148,7 +150,7 @@
     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(); }
+    if (!on) { grid.cellHeight(VIEW_PX); items().forEach(fit); relayout(); }
   }
   var toggle = document.getElementById('dash-edit-toggle');
   if (toggle) toggle.addEventListener('click', function () { setEditing(!editing); });