jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rwallet): align yield rates table columns with fixed-width layout 

Use table-layout:fixed with colgroup for consistent APY/30d Avg/TVL
column alignment. Dedicated yield-rates-table class with right-aligned
monospace numeric columns. Bump JS cache v=12.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-15 15:40:59 -07:00
parent a0723e261a
commit 4cdba2e7de
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
modules/rwallet/components/folk-wallet-viewer.ts
View File

@ -1511,6 +1511,22 @@ class FolkWalletViewer extends HTMLElement {
.yield-action-btn:hover { background: rgba(20,184,166,0.1); }
.yield-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Yield rates table ── */
.yield-rates-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.yield-rates-table th {
text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--rs-border);
color: var(--rs-text-secondary); font-size: 11px; text-transform: uppercase;
}
.yield-rates-table td {
padding: 12px 8px; border-bottom: 1px solid var(--rs-border-subtle);
vertical-align: middle;
}
.yield-rates-table tr:hover td { background: var(--rs-bg-hover); }
.yield-rates-table .col-protocol { width: 22%; }
.yield-rates-table .col-chain { width: 14%; }
.yield-rates-table .col-asset { width: 12%; }
.yield-rates-table .col-num { width: 17%; text-align: right; font-family: monospace; }
@media (max-width: 768px) {
.hero-title { font-size: 22px; }
.balance-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@ -2056,14 +2072,22 @@ class FolkWalletViewer extends HTMLElement {
html += `<div class="yield-section">
<h3 class="yield-section-title">Available Rates</h3>
<table class="balance-table">
<table class="yield-rates-table">
<colgroup>
<col class="col-protocol">
<col class="col-chain">
<col class="col-asset">
<col class="col-num">
<col class="col-num">
<col class="col-num">
</colgroup>
<thead><tr>
<th>Protocol</th>
<th>Chain</th>
<th>Asset</th>
<th class="amount-cell">APY</th>
<th class="amount-cell">30d Avg</th>
<th class="amount-cell">TVL</th>
<th class="col-num">APY</th>
<th class="col-num">30d Avg</th>
<th class="col-num">TVL</th>
</tr></thead>
<tbody>`;
for (const r of rates) {
@ -2074,9 +2098,9 @@ class FolkWalletViewer extends HTMLElement {
<td><span class="yield-protocol-badge ${r.protocol}">${protocolLabel}</span></td>
<td><span class="yield-chain-badge" style="background:${chainColor}22;color:${chainColor}">${chainNames[r.chainId] || r.chainId}</span></td>
<td><span class="token-symbol">${this.esc(r.asset)}</span></td>
<td class="amount-cell" style="color:${apyColor};font-weight:700">${r.apy.toFixed(2)}%</td>
<td class="amount-cell">${r.apy30d != null ? r.apy30d.toFixed(2) + "%" : "-"}</td>
<td class="amount-cell">${r.tvl ? "$" + (r.tvl >= 1e9 ? (r.tvl / 1e9).toFixed(1) + "B" : (r.tvl / 1e6).toFixed(0) + "M") : "-"}</td>
<td class="col-num" style="color:${apyColor};font-weight:700">${r.apy.toFixed(2)}%</td>
<td class="col-num" style="color:var(--rs-text-secondary)">${r.apy30d != null ? r.apy30d.toFixed(2) + "%" : "-"}</td>
<td class="col-num" style="color:var(--rs-text-secondary)">${r.tvl ? "$" + (r.tvl >= 1e9 ? (r.tvl / 1e9).toFixed(1) + "B" : (r.tvl / 1e6).toFixed(0) + "M") : "-"}</td>
</tr>`;
}
html += `</tbody></table></div>`;

2
modules/rwallet/mod.ts
View File

@ -1014,7 +1014,7 @@ function renderWallet(spaceSlug: string, initialView?: string) {
modules: getModuleInfoList(),
theme: "dark",
body: `<folk-wallet-viewer${viewAttr}></folk-wallet-viewer>`,
scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=11"></script>`,
scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=12"></script>`,
styles: `<link rel="stylesheet" href="/modules/rwallet/wallet.css">`,
});
}