Fix PS card blank-body bug: table class cards collided with .cards display:grid (gap-cards) — grid-on-a-table collapses rows to zero height. Renamed to ps-tbl + smoke guard (smoke 88->90)

site/app.js

@@ -681,7 +681,7 @@
     }), '']);
     rows.push(['<b>' + t('ps.card.atRet', { age: fmtInt(ps.startAge) }) + '</b>', '<b>' + m(ps.pensionAtRetirement) + t('unit.yr') + ' · ' + m(ps.pensionAtRetirement / 12) + t('unit.mo') + '</b>']);
     rows.push(['<b>' + t('ps.card.from65') + '</b>', '<b>' + m(ps.pensionFrom65) + t('unit.yr') + ' · ' + m(ps.pensionFrom65 / 12) + t('unit.mo') + '</b>']);
-    var h = '<div class="chart-h"><b>' + t('ps.card.title') + '</b></div><div class="tbl-wrap"><table class="cards">' +
+    var h = '<div class="chart-h"><b>' + t('ps.card.title') + '</b></div><div class="tbl-wrap"><table class="ps-tbl">' +
       rows.map(function (r) { return '<tr><td>' + r[0] + '</td><td>' + r[1] + '</td></tr>'; }).join('') + '</table></div>';
     var notes = [];
     if (ps.notes.indexOf('lt2') >= 0) notes.push(t('ps.card.lt2'));

site/style.css

@@ -155,10 +155,12 @@ input[type=range]{width:100%;accent-color:var(--blue)}
 .tbl-wrap{overflow:auto;max-height:340px;border:1px solid var(--line);border-radius:8px;margin-top:8px}
 table{border-collapse:collapse;font-size:12.5px;width:100%}
 th,td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
-/* Card-style 2-col breakdown tables (PS pension card): wrap text, fixed layout → fits 320px. */
+/* PS pension card breakdown table: wrap text, fixed layout → fits 320px.
-table.cards{table-layout:fixed}
+   NOTE: class is ps-tbl, NOT cards — .cards is display:grid (gap-cards stat grid)
-table.cards td{white-space:normal;word-wrap:break-word;text-align:left;vertical-align:top}
+   and grid-on-a-table collapses the rows to zero height (invisible card body). */
-table.cards td:last-child{text-align:right}
+table.ps-tbl{table-layout:fixed}
+table.ps-tbl td{white-space:normal;word-wrap:break-word;text-align:left;vertical-align:top}
+table.ps-tbl td:last-child{text-align:right}
 th{position:sticky;top:0;background:var(--bg);text-align:right}
 td:first-child,th:first-child{position:sticky;left:0;background:var(--bg)}
 tr.dep td{color:var(--red)}

tests/ui.smoke.js

@@ -195,6 +195,9 @@ function runPs(lang, M, done) {
     ok('PS card bridge line (13,987.50)', M.psBridge.test(h), (h.match(M.psBridge) || [''])[0]);
     ok('PS card sources link PSPC canada.ca', /href="https:\/\/www\.canada\.ca/.test(h));
     ok('PS card IT agreement source (2024-12-22)', /2024-12-22/.test(h));
+    ok('PS card table uses non-colliding class ps-tbl (grid-on-table would blank the card)',
+       /<table class="ps-tbl">/.test(h) && (h.match(/<tr>/g) || []).length >= 7,
+       'rows=' + (h.match(/<tr>/g) || []).length);
     ok('PS series in G2 chart', M.psSeries.test(N(q('#g2')._html)), N(q('#g2')._html).slice(0, 40));
     ok('PS insight in live panel', M.psInsight.test(N(q('#panel-insight')._html)), N(q('#panel-insight')._html).slice(0, 70));
     done();