Skip to content

Copy-to-clipboard icon on the account address box is partially clipped at the mobile viewport edge #3944

Description

@JSONbored

Context

Confirmed via direct interactive testing at 375px on /accounts/$ss58: the account address display box's trailing copy-to-clipboard icon sits flush against, and partially past, the right edge of the viewport. This is a small but real touch-target and visibility issue on the account page's primary identifier control — the one piece of UI most users on this page will actually want to copy.

Requirement

The copy icon on the account address box must be fully visible and tappable within the viewport at mobile widths, with no edge clipping.

Deliverable

  • File to check/fix: the account address display component on apps/ui/src/routes/accounts.$ss58.tsx (the box rendering the full ss58 address with a trailing copy icon).
  • What "done" looks like concretely: at 375px, the copy icon renders with its full tap target visible and clear of the viewport edge — likely a small padding/margin adjustment on the containing box, or a flex-shrink-0 fix if the icon is currently being squeezed by the growing address text.

Acceptance criteria

  • The address display component appears in the diff
  • At mobile width (375px), the copy icon is fully visible with no part of it clipped by the viewport edge, in both themes
  • The copy-to-clipboard functionality itself is unchanged and still works
  • Includes a before/after screenshot table at mobile (375px), both themes, per the repo's UI-PR requirement

Non-goals

  • Don't change the address-truncation/display format itself.
  • Don't touch this pattern anywhere it's reused correctly elsewhere (verify this is actually isolated to this component before assuming a shared root cause).

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