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); });

steward/templates/dashboard/share_view.html

@@ -19,10 +19,12 @@
     .share-header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-mid); min-height: 48px; }
     .share-name { font-family: var(--fs-font-display); font-weight: 500; font-size: 1.15rem; color: var(--gold); overflow-wrap: anywhere; }
     .share-main { max-width: 2400px; }
-    /* The same layout as the signed-in dashboard: rows 70px, gaps 1rem, and
-       static/dash-layout.js sets the columns and each cell's place and height. */
-    .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; }
+    /* The same layout as the signed-in dashboard: a saved row is 70px plus a
+       1rem gap, split into ROW_SPLIT view rows (the gap is each cell's bottom
+       margin), and static/dash-layout.js sets the columns and each cell's
+       place and height. */
+    .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: calc((70px + 1rem) / 7); column-gap: 1rem; row-gap: 0; }
+    .dash-grid > .dash-cell { margin-bottom: 1rem; 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) {
       .share-main { padding: 1rem; }
@@ -69,12 +71,12 @@
 document.addEventListener('DOMContentLoaded', function () {
   var L = window.StewardDashLayout, grid = document.querySelector('.dash-grid');
   if (!L || !grid) return;
-  var ROW_PX = 70, GAP_PX = 16;
+  var GAP_PX = 16, VIEW_PX = (70 + GAP_PX) / L.ROW_SPLIT;
   function cells() { return Array.prototype.slice.call(grid.querySelectorAll('.dash-cell')); }
   function relayout() {
     var cols = L.columnsFor(grid.clientWidth);
     var pos = L.pack(cells().map(function (el) {
-      var s = L.saved(el); s.id = el.dataset.id; s.h = el._fitH || s.h; return s;
+      var s = L.viewed(el); s.id = el.dataset.id; s.h = el._fitH || s.h; return s;
     }), cols);
     grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
     cells().forEach(function (el) {
@@ -85,7 +87,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
   var pending = null;
   function fit(el) {
-    var rows = L.fitRows(el, ROW_PX + GAP_PX, GAP_PX, L.saved(el).h);
+    var rows = L.fitRows(el, VIEW_PX, GAP_PX, L.viewed(el).h);
     if (rows !== el._fitH) { el._fitH = rows; clearTimeout(pending); pending = setTimeout(relayout, 60); }
   }
   document.body.addEventListener('htmx:afterSettle', function (e) {

steward/templates/hosts/overview_widget.html

@@ -17,7 +17,7 @@
 </div>
 <table class="w-table">
   <colgroup><col><col style="width:3.6rem"><col style="width:3.6rem"><col style="width:3.6rem"><col style="width:6.5rem"></colgroup>
-  <thead><tr><th>Host</th><th>CPU</th><th>Mem</th><th>Disk /</th><th>Load</th></tr></thead>
+  <thead><tr><th>Host</th><th>CPU</th><th>Mem</th><th title="Root filesystem">Disk</th><th>Load</th></tr></thead>
   <tbody>
   {% for r in rows %}
   {% set a = r.agent %}{% set fresh = a.get('fresh') %}