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

Closed
PlasticDigits wants to merge 1 commit from 21-fix-treasury-assets-ipad-layout into master
PlasticDigits commented 2026-08-27 00:35:43 +00:00 (Migrated from gitlab.com)

Closes #21.

Summary

  • Treasury Assets grid is now 1-col / 2-col through tablet including 1024px (lg), and 3-col only at xl (1280+). The loading skeleton uses the same 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, so title is not the disclosure.
  • 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 live in treasuryAssetDisplay.ts with unit tests. Invariants and playbook: skills/frontend-treasury-assets-layout/SKILL.md.

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
  • /treasury at 375: 1-col, no page X-scroll, full USTC/LUNC amounts
  • /treasury at 768 / 820 / 834 / 1024: 2-col (not 3 at 1024), full 100% of pool / 97.78% 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}
  • Rank badges stay on icons; vFDUSD · session oracle does not collide; empty / loading still work
  • Key Ratios / Issuance unchanged (regression)
  • 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 (out of scope or post-deploy)

  • Real-device iPad Safari capture (no physical device here). Local Vite preview + Playwright at 375/768/834/1024/1280 passed.
  • Production / Coolify re-check after deploy (issue close criterion 6).
  • Playwright is not added to the repo (issue: optional later).
  • #20 CL8Y/cUSTC pin itself (layout only tolerates the label).
  • Issuance / Key Ratios redesign (no clip found after this fix).
Closes #21. ## Summary - Treasury Assets grid is now 1-col / 2-col through tablet **including 1024px (`lg`)**, and 3-col only at `xl` (1280+). The loading skeleton uses the same `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, so `title` is not the disclosure. - 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 live in `treasuryAssetDisplay.ts` with unit tests. Invariants and playbook: `skills/frontend-treasury-assets-layout/SKILL.md`. 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` - [ ] `/treasury` at **375**: 1-col, no page X-scroll, full USTC/LUNC amounts - [ ] `/treasury` at **768 / 820 / 834 / 1024**: **2-col** (not 3 at 1024), full `100% of pool` / `97.78% 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}` - [ ] Rank badges stay on icons; vFDUSD `· session oracle` does not collide; empty / loading still work - [ ] Key Ratios / Issuance unchanged (regression) - [ ] 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 (out of scope or post-deploy) - Real-device iPad Safari capture (no physical device here). Local Vite preview + Playwright at 375/768/834/1024/1280 passed. - Production / Coolify re-check after deploy (issue close criterion 6). - Playwright is **not** added to the repo (issue: optional later). - `#20` CL8Y/cUSTC pin itself (layout only tolerates the label). - Issuance / Key Ratios redesign (no clip found after this fix).
PlasticDigits commented 2026-08-27 00:36:36 +00:00 (Migrated from gitlab.com)

mentioned in issue #21

mentioned in issue #21
PlasticDigits commented 2026-08-27 10:24:21 +00:00 (Migrated from gitlab.com)

mentioned in merge request !40

mentioned in merge request !40
PlasticDigits commented 2026-08-27 10:24:31 +00:00 (Migrated from gitlab.com)

Superseded by !40 (21-treasury-assets-ipad-layout).

!38 dropped Playwright data-testid hooks that master e2e relies on and removed some #18 skill cross-links. !40 keeps those, adds viewport e2e, and is verified at 375/768/834/1024/1280.

Superseded by !40 (`21-treasury-assets-ipad-layout`). !38 dropped Playwright `data-testid` hooks that master e2e relies on and removed some #18 skill cross-links. !40 keeps those, adds viewport e2e, and is verified at 375/768/834/1024/1280.
PlasticDigits (Migrated from gitlab.com) closed this pull request 2026-08-27 10:24:32 +00:00

Pull request closed

Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/ustr-cmm!38
No description provided.