krisf/retire-planner
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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)

Browse Source
This commit is contained in:
krisf committed 2026-10-09 12:44:32 -04:00
1 parent 3981b9bc26
commit 9945e46dec
3 files changed
+10 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/app.js
+1 -1
View File
@@ -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
+6 -4
View File
@@ -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. */
table.cards{table-layout:fixed}
table.cards td{white-space:normal;word-wrap:break-word;text-align:left;vertical-align:top}
table.cards td:last-child{text-align:right}
/* PS pension card breakdown table: wrap text, fixed layout → fits 320px.
NOTE: class is ps-tbl, NOT cards — .cards is display:grid (gap-cards stat grid)
and grid-on-a-table collapses the rows to zero height (invisible card body). */
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)}