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/static/dash-layout.js

@@ -7,9 +7,14 @@
    side by side; none is stretched. Edit mode always shows the saved 12-column
    layout, so what is saved never depends on the screen it was edited on.
 
+   Outside edit mode each saved row is split into ROW_SPLIT finer rows, so a
+   widget's height fits its content to within 10px rather than to a whole
+   70px row (#5214). viewed() gives the saved place in those rows.
+
    Used by the dashboard (Gridstack) and the share view (CSS grid). */
 (function () {
-  var COL_PX = 110, MIN_COLS = 12, MAX_COLS = 24, NARROW_PX = 700, MIN_ROWS = 2;
+  var COL_PX = 110, MIN_COLS = 12, MAX_COLS = 24, NARROW_PX = 700;
+  var ROW_SPLIT = 7, MIN_ROWS = ROW_SPLIT;       // view rows: one saved row is the least
 
   function columnsFor(width) {
     if (width < NARROW_PX) return 1;
@@ -74,9 +79,9 @@
     return h;
   }
 
-  /* Grid rows for that height: rowPx is one row plus the gap that follows it,
-     gapPx the space a cell loses to its margins. Capped at the saved height,
-     where the body scrolls instead. */
+  /* View rows for that height: rowPx is one view row (with its share of the
+     gap), gapPx the space a cell loses to its margins. Capped at maxRows, the
+     saved height in view rows, where the body scrolls instead. */
   function fitRows(box, rowPx, gapPx, maxRows) {
     var rows = Math.ceil((naturalHeight(box) + gapPx) / rowPx);
     return Math.max(MIN_ROWS, Math.min(maxRows, rows));
@@ -86,7 +91,13 @@
     return { x: +el.dataset.x, y: +el.dataset.y, w: +el.dataset.w, h: +el.dataset.h };
   }
 
+  function viewed(el) {
+    var s = saved(el);
+    return { x: s.x, y: s.y * ROW_SPLIT, w: s.w, h: s.h * ROW_SPLIT };
+  }
+
   window.StewardDashLayout = {
-    MIN_COLS: MIN_COLS, columnsFor: columnsFor, pack: pack, fitRows: fitRows, saved: saved,
+    MIN_COLS: MIN_COLS, ROW_SPLIT: ROW_SPLIT, columnsFor: columnsFor, pack: pack,
+    fitRows: fitRows, saved: saved, viewed: viewed,
   };
 })();

steward/static/steward.css

@@ -390,6 +390,7 @@ body.dash-editing .widget-drawer { transform:translateY(0); }
 .w-table th { text-align:right; font-weight:500; font-size:var(--fs-size-tiny); color:var(--text-dim); text-transform:uppercase; letter-spacing:var(--fs-tracking-tiny); padding:0 0 0.25rem 0.5rem; white-space:nowrap; }
 .w-table td { text-align:right; padding:0.2rem 0 0.2rem 0.5rem; border-top:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .w-table th:first-child, .w-table td:first-child { text-align:left; padding-left:0; }
+.w-table .w-text { text-align:left; }              /* a text column after the name: reads from the left, like its header */
 .w-table td.w-name { overflow:hidden; text-overflow:ellipsis; }
 .w-table td.w-name a { color:inherit; text-decoration:none; }
 .w-table td.w-name a:hover { text-decoration:underline; }