0.32.1

tools/checks/overview_0321_layout_regression.mjs

@@ -0,0 +1,52 @@
+// 0.32.1 regression: restore pre-0.32.0 content-driven tile heights and
+// align inter-tile gaps with the same spacing as other Dashboard sections.
+// These are source/CSS contracts, not a browser or authenticated-UI test.
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+
+const css = fs.readFileSync('src/admin/web/style.css', 'utf8');
+const html = fs.readFileSync('src/admin/web/index.html', 'utf8');
+
+function rule(selector) {
+    // Target precise blocks rather than accepting an unrelated matching rule.
+    const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const match = css.match(new RegExp(`${escaped}\\s*\\{([^{}]*)\\}`));
+    assert(match, `Missing CSS rule: ${selector}`);
+    return match[1];
+}
+
+for (const density of ['normal', 'compact', 'ultra']) {
+    const declarations = rule(`html[data-dashboard-density="${density}"] #panel-overview .stats-grid`);
+    assert.match(declarations, /gap:\s*var\(--ui-gap\)\s*;/,
+        `${density} tiles must use the same density-aware gap as Dashboard sections`);
+}
+const sharedGap = rule('.overview-grid,\n.diagnostics-grid,\n.settings-grid,\n.config-columns');
+assert.match(sharedGap, /gap:\s*var\(--ui-gap\)/);
+for (const density of ['dense', 'comfortable', 'compact']) {
+    assert.match(css, new RegExp(`body\\[data-density="${density}"\\]\\s*\\{[^}]*--ui-gap:`),
+        `UI density ${density} must provide the shared gap variable`);
+}
+assert.match(css, /@media \(min-width: 1201px\)\s*\{\s*#panel-overview \.stats-grid\s*\{\s*grid-template-columns:\s*repeat\(6, minmax\(0, 1fr\)\);/,
+    'six desktop columns are preserved');
+assert.doesNotMatch(css, /#panel-overview \.stats-grid\s*>\s*\.stat\s*\{[^}]*\bmin-height\s*:/s,
+    'desktop cards should grow naturally to their legend/content height');
+assert.doesNotMatch(css, /#panel-overview \.stats-grid \.stat:is\(:hover, :focus-visible, :focus-within\)/,
+    'card descriptions must remain visible, not hover-only');
+
+const heading = rule('html[data-dashboard-density="compact"] #panel-overview .stat>span');
+const metric = rule('html[data-dashboard-density="compact"] #panel-overview .stat strong');
+const caption = rule('html[data-dashboard-density="compact"] #panel-overview .stat small');
+const payload = rule('html[data-dashboard-density="compact"] #panel-overview .payload-split');
+assert.match(heading, /font-size:\s*11px/);
+assert.match(metric, /font-size:\s*25px/);
+assert.match(caption, /font-size:\s*10px/);
+assert.match(payload, /font-size:\s*10px\s*!important/);
+assert.match(css, /#panel-overview \.stats-grid \.stat-chart>\.stat-chart-legend\s*\{[^}]*flex-wrap:\s*wrap/s);
+
+const overview = html.slice(html.indexOf('id="panel-overview"'), html.indexOf('class="overview-grid"'));
+assert.equal([...overview.matchAll(/data-dashboard-widget="/g)].length, 16,
+    'no metric/Stream cards may be removed');
+assert.match(overview, /id="metric-bytes-split"/);
+assert.match(overview, /id="http-protocol-chart"/);
+assert.match(overview, /id="ws-protocol-chart"/);
+console.log('PASS: 0.32.1 Overview six-column content height, 90% compact typography, shared tile spacing and inline legends.');