Skip to content

Yield tab's "VALIDATORS / MINERS" KPI tile truncates mid-word on mobile while its two sibling tiles don't #3936

Description

@JSONbored

Context

On the mobile screenshot for #3708, the third KPI tile in the Yield tab's summary row renders its header cut off mid-word as "VALIDATORS /…" and its sub-caption as "256 …", while the two sibling tiles in the same row ("SUBNET YIELD", "MEDIAN YIELD") display their full labels without truncation at the same width. The truncated tile also loses the border/icon treatment its neighbors keep, making it look visibly broken relative to the row it's part of.

Requirement

The "VALIDATORS / MINERS" KPI tile must render its full label and sub-caption on mobile, with the same visual treatment (border, icon) as its sibling tiles in the same row.

Deliverable

  • File to change: the Yield tab's KPI tile row component (introduced in feat(ui): add per-UID emission-yield tab to the subnet profile page #3708) — likely needs either a shorter label variant at narrow widths, a smaller font-size step, or a two-line layout for this specific tile's longer label, rather than letting it truncate.
  • What "done" looks like concretely: at mobile width, all three tiles in the row show complete, untruncated text, with visually consistent borders/icons across all three.

Acceptance criteria

  • The KPI tile row component appears in the diff
  • At mobile width (375-390px), the "VALIDATORS / MINERS" tile's label and sub-caption render in full, with no mid-word truncation
  • The tile's border/icon treatment matches its two siblings
  • Includes a before/after screenshot table at mobile, both themes, per the repo's UI-PR requirement

Non-goals

  • Don't change the KPI values themselves or the tile's data source.
  • Don't restyle the other two tiles in the row — they're already correct.

Size

Size: XS — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:bugGittensor-scored bug fix or unsolicited PR — scores a 0.05x multiplier.

    Projects

    Status
    In progress

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions