fix(frontend): Treasury Assets cards clip values and misalign on iPad #21
Labels
No labels
bug
docs
documentation
duplicate
enhancement
frontend
good first issue
help wanted
invalid
missing-implementation
priority
medium
product
QA
question
testing
UX
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/ustr-cmm#21
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
/treasuryTreasury Assets cards clip primary amounts, LP pool-share copy, and CR haircut lines on tablet / iPad viewports. A three-column grid at the Tailwindlgbreakpoint (1024px) plus a single-row card with a non-shrinking label leaves too little room forformatPoolShare/formatAmount/ CR strings. Truncation uses CSS ellipsis, so readers cannot recover the missing text on iPad (no hover).This is a display-only layout bug. Do not change CR math, available-supply, LP allowlisting, or on-chain behavior.
Current codebase
TreasuryPage(frontend/src/pages/TreasuryPage.tsx) rendersTreasuryAssetsCardinsideLayout(frontend/src/components/layout/Layout.tsx):container mx-auto px-4. Tailwind’s default container atlgis 1024px, so iPad landscape / iPad Pro 12.9" portrait (1024 CSS px) minus page padding (~32px) andCardContentpadding (p-5 md:p-6) leaves ~900px for the grid.The grid is:
At 1024px that is three columns. Each tile is a horizontal flex row (
flex items-center justify-between gap-2 … min-w-0):flex-shrink-0): 40pxTokenIcon, rank badge, andpairLabel/displayName(LP UST1/cUSTC,LP UST1/USTR,LP UST1/SpaceUSDfromtokenlist.jsonpool.nameviatreasuryLp.ts→useTreasury).min-w-0 flex-1):formatPoolShare("97.43% of pool","100% of pool"); spot →formatAmount(up to 6 fraction digits, e.g.41,190,153.481234). Classes includetext-sm sm:text-base lg:text-lg … truncate.formatUsd($x.xx, or$x.xxxxxxwhen< 0.01).CR counts ${formatUsd(crUsd)} (${haircutLegs.join(', ')} omitted)withtruncate.truncate(overflow: hidden; text-overflow: ellipsis; white-space: nowrap) is why production shows100% of …,97.43% o…, andCR counts $0.00000…. Spot rows (USTC, LUNC) also clip large balances. Loading skeleton uses the same 3-col grid; empty state does not.Issuance and Key Ratios use
md:grid-cols-2and were not the reported failure. Keep them unchanged unless the same overflow appears after the assets-grid fix.Related:
#20will add another long LP label (CL8Y/cUSTC). Same layout must accept that row.Why a new implementation is needed
Treasury is the public CR / holdings surface. On iPad the grid looks uneven: short spot names fit, long LP names steal the row, and the numbers that matter (pool share, USD, what CR counts) disappear into ellipsis. Users cannot tap to expand;
titleis hover-only.A breakpoint-only tweak or a copy-only tweak is not enough by itself: 2-col still fails if the left cluster never shrinks and the right cluster never wraps. The card chrome and the value typography need to share one tablet-safe layout.
Constraints / guardrails
computeTreasuryRatios,computeLpNav, available-supply, haircut rules, skip-lists, or contract queries.titleas the only fix. iPad has no hover.pairLabelstays sourced from tokenlist (pool.name/name/symbol). Do not hardcode production pair names in the component.formatPoolSharealready treats share≥ 0.99995as100% of pool(format.test.ts). Do not widen that rounding.NAV incomplete, and vFDUSDsession oracleannotation.shouldShowAsset) unchanged.dangerouslySetInnerHTML). Tokenlist strings are untrusted length.Relevant files
frontend/src/components/treasury/TreasuryAssetsCard.tsxtruncate, CR / USD / share renderingfrontend/src/pages/TreasuryPage.tsxfrontend/src/components/layout/Layout.tsxcontainer mx-auto px-4width budgetfrontend/src/components/common/Card.tsxCardContentpaddingfrontend/src/utils/format.tsformatPoolShare,formatAmountfrontend/src/utils/format.test.tsfrontend/src/types/treasury.tsTreasuryAsset(kind,pairLabel,poolShare,crUsd,haircutLegs)frontend/src/services/treasuryLp.tspairLabelfrom tokenlistfrontend/src/hooks/useTreasury.tsfrontend/public/assets/tokenlist.jsonLP UST1/USTR,LP UST1/cUSTC,LP UST1/SpaceUSD)frontend/src/index.css.font-mono-numbers(tabular / wide digits)frontend/tailwind.config.jssm640,md768,lg1024,xl1280)Recommended direction
Prefer all three (they are one layout change, not three features):
lg). Move 3-col toxl(1280+) so classic iPad landscape is not forced into three cramped tiles. Apply the same classes to the loading skeleton.flex-shrink-0on a single cramped row. On tablet, stack: identity (icon + name) on one line, values on the next, full width, wrap allowed. Desktopxlmay stay a two-column row if values still fit.truncatefrom primary amount, USD, and CR lines, or wrap them. Optional: put"of pool"on a second line or shorten CR to e.g.CR $0.00 · cUSTC omittedwithout dropping the omitted-leg list. Optional: fewer display fraction digits on large spot balances in the card only.Do not ship tooltip-only,
scaletricks, or a horizontal scroller inside each tile.Acceptance criteria
LP UST1/SpaceUSDandformatPoolSharestrings.xl/ 1280+).NAV incomplete, and vFDUSD session-oracle note still behave as today.formatPoolSharerounding contract unchanged unless tests are deliberately updated for a shorter display string that still matches≥ 0.99995→ 100% and rejects non-finite / negative.#20addsCL8Y/cUSTC(long label + haircut).Test plan (all paths)
Unit (vitest)
formatPoolShareor card-local USD/CR copy changes: extendfrontend/src/utils/format.test.ts(and any new helper tests). Keep:0.985497→ two-decimal percent;≥ 0.99995→ 100%;null/NaN/ negative →—.formatAmountcard-display changes: large USTC/LUNC-style integers, dust< 0.01USD still six-decimal if that helper stays.Component / visual (no Playwright in repo today — use Vite preview + DevTools device mode or real iPad)
No treasury assets foundcentered; no stray gridpx <= 0)displayUsd < 1stay hidden100% of pool(or agreed shorter form) fully visible97.43% of poolfully visibleformatPoolShareif exercisedCR counts …both completenavIncompleteNAV incompletewraps, does not overflow· session oracledoes not collide with USDscanner/address/{explorerAddress}; tappable on iPadLP CL8Y/cUSTCfrom#20Regression (unchanged math)
#16/#18rules).Tooling
cd frontend && npm test && npm run checkTest plan (attack, hack, and abuse vectors)
This surface is public and read-only, but clipped numbers are a deception / integrity bug. Treat the following as required checks:
100% of …can be read as certainty when the rest of the string is gone; a later 10% position must never look like 100%CR counts $0.00…can hide that protocol legs do not counttitle/ tooltips do not exist for iPad tappool.nameis external JSON<a href>formatPoolShare0.99995 rule; do not change CR inputstreasuryRatios.ts,lpNav.ts, or allowlist discoverydocumentwidth ≤ viewport at listed breakpointstext-sm/text-xsCR lineOut of scope for this issue: wallet connect, tx signing, contract admin.
Verification criteria
Issue may close only when all of the following are recorded on the MR or this issue:
/treasuryat 768, 1024, and 1280 CSS px (and at least one real iPad Safari capture, portrait + landscape if available) showing USTC/LUNC and the three current LP rows with no ellipsis on primary / USD / CR lines.npm testandnpm run checkgreen; any format-copy change has unit coverage.ust1cmm.com/treasuryor equivalent) re-checked after deploy — local-only is not sufficient to close.Out of scope
#20CL8Y/cUSTC) except that this layout must tolerate that label.Owner type
frontend / UX
mentioned in merge request !37
mentioned in merge request !38
Implementation is in !38 (
21-fix-treasury-assets-ipad-layout).Done (acceptance): tablet/iPad widths wrap instead of ellipsis; 2-col through 1024px; 3-col only at
xl; skeleton matches; CR haircut still visible (shorter copy); no CR/NAV/query changes;formatPoolSharerounding unchanged.Not done here: real iPad Safari capture; production/Coolify re-check after deploy (close criterion 6); Playwright not added to the repo; #20 pin itself.
Local verify:
npm test && npm run checkgreen (91 tests). Playwright + browser at 375/768/834/1024/1280: expected column counts, full100% of pool/ CR lines, no page X-scroll.mentioned in merge request !40
Implementation is in !40 (
21-treasury-assets-ipad-layout). Supersedes !38.Done (acceptance): tablet/iPad widths wrap instead of ellipsis; 2-col through 1024px; 3-col only at
xl; skeleton matches; CR haircut still visible (shorter copy); no CR/NAV/query changes;formatPoolSharerounding unchanged; e2e testids kept.Not done here: real iPad Safari capture; production/Coolify re-check after deploy (close criterion 6); #20 pin itself.
Local verify:
npm test && npm run checkgreen (99 tests). Playwright--workers=5at 375/768/834/1024/1280: expected column counts, full100% of pool/ CR lines, no page X-scroll. Browser check: View Contract opens columbus-5 treasury scanner.mentioned in commit
476d992430Merged via !40 into
master@476d992after merging master (!39) into the source branch and resolving conflicts. Did not use auto-merge; did not wait for CI/Coolify.Code-level acceptance (local): met. Display-only: no CR/NAV/tokenlist math changes. Conflict resolution kept this layout rewrite and folded in !39
missingPriceLegson the NAV incomplete line (wrap, not truncate).Local Vite @ 768 / 1024: 2-col (not 3 at 1024);
100% of pool/98.32% of pool/ CR haircut lines fully visible; notruncate; no page X-scroll. 1280+ is 3-col. View Contract and Pair hrefs are columbus-5 scanner addresses.LP CL8Y-cb/cUSTCfrom #20 wraps.Problems / still open (GitLab auto-closed this issue on merge):
ust1cmm.com/treasuryis still the pre-!40 UI (notreasury-assets-gridtestid / still 1.3.2 tokenlist). Coolify re-check after deploy is required.Follow-up tracked in a new post-merge issue.
mentioned in issue #18
mentioned in issue #22
marked as related to #22