Mobile: Text overlap on Dashboard USTR Supply / USTC Reserve cards #3

New issue

Closed

opened 2026-03-11 08:31:36 +00:00 by PlasticDigits · 4 comments

PlasticDigits commented

2026-03-11 08:31:36 +00:00

(Migrated from gitlab.com)

Bug Description

On the Dashboard page at ust1cmm.com, the large numeric values in the Total USTR Supply and Treasury USTC Reserve stat cards overflow their containers on mobile / narrow viewports. The currency label text ("USTR" / "USTC") overlaps with the leading digits of the number, making the values partially unreadable.

The Enumerated Accounts card above is unaffected because its value is short enough to fit.

Steps to Reproduce

Open https://ust1cmm.com on an iPhone or any narrow mobile viewport.
Scroll to the Dashboard USTR Statistics section.
Observe the Total USTR Supply and Treasury USTC Reserve cards.

Expected Behaviour

The numeric values and their currency labels should be fully visible and not overlap on all screen sizes.

Actual Behaviour

The currency prefix/label overlaps the leading digits of the value (e.g. "USTR" overlaps "56R,105,658…" and "USTC" overlaps "38C,723,646…").

Evidence

Recommended Fix

Allow the numeric value to wrap or shrink (font-size scaling / text-overflow) so it stays within its card on smaller screens.
Alternatively, use responsive font sizing (e.g. clamp() or a smaller breakpoint font) for the stat values, or abbreviate large numbers on mobile (e.g. "56.1M USTR").
Ensure the currency label and value are laid out so they cannot overlap (e.g. stacking vertically or using flex-wrap).

## Bug Description On the Dashboard page at [ust1cmm.com](https://ust1cmm.com), the large numeric values in the **Total USTR Supply** and **Treasury USTC Reserve** stat cards overflow their containers on mobile / narrow viewports. The currency label text ("USTR" / "USTC") overlaps with the leading digits of the number, making the values partially unreadable. The **Enumerated Accounts** card above is unaffected because its value is short enough to fit. ## Steps to Reproduce 1. Open https://ust1cmm.com on an iPhone or any narrow mobile viewport. 2. Scroll to the Dashboard **USTR Statistics** section. 3. Observe the Total USTR Supply and Treasury USTC Reserve cards. ## Expected Behaviour The numeric values and their currency labels should be fully visible and not overlap on all screen sizes. ## Actual Behaviour The currency prefix/label overlaps the leading digits of the value (e.g. "USTR" overlaps "56R,105,658…" and "USTC" overlaps "38C,723,646…"). ## Evidence ![mobile-text-overlap](https://gitlab.com/PlasticDigits1/cl8y-qa-evidence/-/raw/main/2026-03-11/mobile-text-overlap-dashboard.png) ## Recommended Fix - Allow the numeric value to wrap or shrink (`font-size` scaling / `text-overflow`) so it stays within its card on smaller screens. - Alternatively, use responsive font sizing (e.g. `clamp()` or a smaller breakpoint font) for the stat values, or abbreviate large numbers on mobile (e.g. "56.1M USTR"). - Ensure the currency label and value are laid out so they cannot overlap (e.g. stacking vertically or using `flex-wrap`).

PlasticDigits commented

2026-03-11 08:32:39 +00:00

(Migrated from gitlab.com)

assigned to @Brouie

Brouie commented

2026-03-12 01:51:00 +00:00

(Migrated from gitlab.com)

mentioned in merge request !25