fix(frontend): keep Treasury Assets values readable on iPad

PlasticDigits commented

2026-08-27 10:24:18 +00:00

(Migrated from gitlab.com)

Closes #21.

Supersedes !38: that branch dropped Playwright data-testid hooks and some #18 skill cross-links. This MR keeps both.

Summary

Treasury Assets grid is 1-col on phones, 2-col through tablet including 1024px (lg), and 3-col only at xl (1280+). Loading skeleton shares TREASURY_ASSETS_GRID_CLASS.
Tiles stack identity over values (row only at xl) and wrap primary / USD / CR / NAV incomplete instead of CSS ellipsis. iPad has no hover.
CR haircut copy is shorter but complete (CR $0.00 · UST1, cUSTC omitted). formatPoolShare rounding is unchanged. Card-only large-spot display decimals do not feed CR/NAV.
Display helpers: treasuryAssetDisplay.ts. Playbook: skills/frontend-treasury-assets-layout/SKILL.md.
E2E: frontend/e2e/treasury-assets-layout.spec.ts (375 / 768 / 834 / 1024 / 1280 column counts, no ellipsis, no page X-scroll, scanner links).

Display-only. Diff does not touch treasuryRatios, lpNav, available-supply, tokenlist allowlist, or on-chain queries.

Test plan

cd frontend && npm test && npm run check (99 tests)
npm run test:e2e with --workers=5 against a live Vite server (16 passed)
/treasury at 375: 1-col, no page X-scroll
/treasury at 768 / 834 / 1024: 2-col (not 3 at 1024), full 100% of pool / 98.32% of pool, full CR haircut lines including $0 + omitted legs
/treasury at 1280: 3-col still readable, no ellipsis
View Contract → columbus-5 scanner /address/{treasury}
Pair → columbus-5 scanner /address/{pair}
After Coolify/prod deploy: re-check ust1cmm.com/treasury on a real iPad (portrait + landscape)

Acceptance (#21)

iPad-class widths: primary / USD / CR lines fully readable (no ellipsis) for current spot + LP rows including LP UST1/SpaceUSD
Same-row alignment; tiles may grow, do not overlap
3-col not used at 1024; 3-col at xl only
Loading skeleton shares column breakpoints
Empty, ranks, View Contract, Pair, dust filter, NAV incomplete, vFDUSD session-oracle kept
CR haircut meaning unchanged and still visible
No CR / NAV / available-supply / tokenlist / query changes
formatPoolShare rounding unchanged (≥ 0.99995 → 100%; 0.99994 stays 99.99%)
Layout accepts a future #20 LP CL8Y/cUSTC label (wrap, not hardcode)

Not done

Real-device iPad Safari capture (no physical device here).
Production / Coolify re-check after deploy (issue close criterion 6).
Pinning #20 CL8Y/cUSTC itself (layout only tolerates the label).
Issuance / Key Ratios redesign (no clip found after this fix).

Closes #21. Supersedes !38: that branch dropped Playwright `data-testid` hooks and some #18 skill cross-links. This MR keeps both. ## Summary - Treasury Assets grid is 1-col on phones, **2-col through tablet including 1024px (`lg`)**, and 3-col only at `xl` (1280+). Loading skeleton shares `TREASURY_ASSETS_GRID_CLASS`. - Tiles stack identity over values (row only at `xl`) and **wrap** primary / USD / CR / `NAV incomplete` instead of CSS ellipsis. iPad has no hover. - CR haircut copy is shorter but complete (`CR $0.00 · UST1, cUSTC omitted`). `formatPoolShare` rounding is unchanged. Card-only large-spot display decimals do not feed CR/NAV. - Display helpers: `treasuryAssetDisplay.ts`. Playbook: `skills/frontend-treasury-assets-layout/SKILL.md`. - E2E: `frontend/e2e/treasury-assets-layout.spec.ts` (375 / 768 / 834 / 1024 / 1280 column counts, no ellipsis, no page X-scroll, scanner links). Display-only. Diff does not touch `treasuryRatios`, `lpNav`, available-supply, tokenlist allowlist, or on-chain queries. ## Test plan - [x] `cd frontend && npm test && npm run check` (99 tests) - [x] `npm run test:e2e` with `--workers=5` against a live Vite server (16 passed) - [x] `/treasury` at **375**: 1-col, no page X-scroll - [x] `/treasury` at **768 / 834 / 1024**: **2-col** (not 3 at 1024), full `100% of pool` / `98.32% of pool`, full CR haircut lines including `$0` + omitted legs - [x] `/treasury` at **1280**: 3-col still readable, no ellipsis - [x] View Contract → columbus-5 scanner `/address/{treasury}` - [x] Pair → columbus-5 scanner `/address/{pair}` - [ ] After Coolify/prod deploy: re-check `ust1cmm.com/treasury` on a real iPad (portrait + landscape) ## Acceptance (#21) - [x] iPad-class widths: primary / USD / CR lines fully readable (no ellipsis) for current spot + LP rows including `LP UST1/SpaceUSD` - [x] Same-row alignment; tiles may grow, do not overlap - [x] 3-col not used at 1024; 3-col at `xl` only - [x] Loading skeleton shares column breakpoints - [x] Empty, ranks, View Contract, Pair, dust filter, `NAV incomplete`, vFDUSD session-oracle kept - [x] CR haircut meaning unchanged and still visible - [x] No CR / NAV / available-supply / tokenlist / query changes - [x] `formatPoolShare` rounding unchanged (`≥ 0.99995` → 100%; `0.99994` stays 99.99%) - [x] Layout accepts a future `#20` `LP CL8Y/cUSTC` label (wrap, not hardcode) ## Not done - Real-device iPad Safari capture (no physical device here). - Production / Coolify re-check after deploy (issue close criterion 6). - Pinning `#20` CL8Y/cUSTC itself (layout only tolerates the label). - Issuance / Key Ratios redesign (no clip found after this fix).

PlasticDigits commented

2026-08-27 10:24:31 +00:00

(Migrated from gitlab.com)

mentioned in merge request !38

PlasticDigits commented

2026-08-27 10:24:34 +00:00

(Migrated from gitlab.com)

mentioned in issue #21

PlasticDigits commented

2026-08-27 10:35:33 +00:00

(Migrated from gitlab.com)

added 3 commits

47f81202...ff98806a - 2 commits from branch master
ce585561 - Merge branch 'master' into 21-treasury-assets-ipad-layout

Compare with previous version

added 3 commits <ul><li>47f81202...ff98806a - 2 commits from branch <code>master</code></li><li>ce585561 - Merge branch 'master' into 21-treasury-assets-ipad-layout</li></ul> [Compare with previous version](/PlasticDigits2/ustr-cmm/-/merge_requests/18/diffs?diff_id=1987668479&start_sha=47f81202300aff82a9114a2463a68a8b11afd822)