fix(ui): keep the account address copy icon inside the viewport at mobile (#3944)

[real-venus]

Summary

Closes #3944

On /accounts/$ss58 the address box wrapped the full ss58 in a max-w-fit box around an inline-flex CopyableCode — both of which size to content. At 375px the long address grew the box past the right viewport edge and clipped the trailing copy icon (the page's primary tap target). This caps the box at the parent width while keeping it shrink-to-content on wider viewports
(w-fit max-w-full) and caps the code button too, so the address truncates inside the box and the copy icon stays fully visible and tappable.

Changes

• routes/accounts.$ss58.tsx — the address-box wrapper is now w-fit max-w-full (shrink-to-content, capped at the parent) and the CopyableCode is passed className="max-w-full" so its code truncates and the copy icon (already shrink-0) stays inside the viewport.

Screenshots

Account address box on /accounts/<ss58> at fixed viewports (Playwright, no devtools). The fix is mobile-gated: at 375px the before lets the box grow to the full ss58 with the copy icon jammed against the right edge, while the after
caps the box so the address truncates and the copy icon stays fully visible/tappable. At tablet/desktop the box is compact either way — those pairs confirm no regression.

Viewport · Theme	Before	After
Desktop · Light	before	after
Desktop · Dark	before	after
Tablet · Light	before	after
Tablet · Dark	before	after
Mobile · Light	before	after
Mobile · Dark	before	after

Validation

• tsc --noEmit ✓ · prettier --check (3.9.4) ✓ · eslint (0 errors) ✓
• vitest run — 670/670 pass ✓ · build ✓
• One file changed; /accounts/* isn't an e2e-checked route, so no HAR re-record

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.93%. Comparing base (9854829) to head (d7f2226).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4946   +/-   ##
=======================================
  Coverage   97.93%   97.93%           
=======================================
  Files         163      163           
  Lines       19390    19390           
  Branches     7365     7365           
=======================================
  Hits        18990    18990           
  Misses         53       53           
  Partials      347      347           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gittensory-orb]

Warning

🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨

⏸️ Gittensory review result - manual review recommended

_{Review updated: 2026-07-13 00:33:46 UTC}

1 file · 1 AI reviewer · no blockers · readiness 100/100 · CI green · clean

⏸️ Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/ui/src/routes/accounts.$ss58.tsx (matched apps/ui/**).

Review summary
This PR caps the ss58 address box (`w-fit max-w-full`) and the CopyableCode component (`className="max-w-full"`) so the box can no longer push its trailing copy icon past the mobile viewport edge, matching the issue #3944 symptom exactly. The change is a minimal, correctly-scoped CSS fix to a single file, and relies on the copy icon already being `shrink-0` (per the description) so it stays visible while the address text truncates. The fix is plausible and narrowly targeted, though it can't be verified without seeing CopyableCode's internal truncation/overflow handling to confirm `max-w-full` actually produces text truncation there.

Nits — 7 non-blocking

• Could not verify from this diff alone that `CopyableCode`'s internal layout (the element receiving `className`) applies `overflow-hidden`/`text-overflow: ellipsis`/`min-w-0` needed for `max-w-full` to actually truncate the text rather than just constrain the flex item — worth confirming in `components/metagraphed/copyable-code.tsx`.
• No test-path changes accompany this visual fix, though that's consistent with this being a pure CSS/layout tweak.
• Confirm `CopyableCode`'s inner code/text element has `min-w-0 overflow-hidden truncate` (or similar) so the new `max-w-full` cap actually results in visual truncation rather than the text overflowing its container unclipped.
• apps/ui/src/routes/accounts.$ss58.tsx:199: the four-line JSX comment restates the issue and CSS behavior in more detail than this local layout tweak needs; a shorter comment or relying on the issue-linked class change would reduce visual noise in the route component.
• apps/ui/src/routes/accounts.$ss58.tsx:204: because `truncate={false}` is intentionally retained, verify `CopyableCode` still applies CSS overflow truncation to the full value rather than only displaying an unbounded full string inside `max-w-full`.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

Signal	Result	Evidence
Code review	✅ No blockers	1 reviewer
Linked issue	✅ Linked	#3944
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 109 registered-repo PR(s), 58 merged, 12 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	real-venus; Gittensor profile; 109 PR(s), 12 issue(s).
Gate result	⚠️ Not blocking	Advisory; not blocking this PR.

Review context

• Author: real-venus
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Official Gittensor activity: 109 PR(s), 12 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

[BETA] Chat with Gittensory

Ask Gittensory a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @gittensory ask <question> answers contribution-quality Q&A with source citations and freshness.
• @gittensory chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @gittensory mention with a real question is routed to the closest matching read-only command automatically -- no exact syntax required.

Full command reference: https://gittensory.aethereal.dev/docs/gittensory-commands

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop			—
/	mobile			—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by Gittensory, a quiet PR intelligence layer for OSS maintainers.

• Re-run Gittensory review

[real-venus]

@JSONbored

Please kindly review.