fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5

[bitfathers94]

fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5

Converts the remaining no-restricted-syntax violations (arbitrary
text-[Npx] sizes, one raw spacing step, a hand-rolled card shell, and a
raw ) across 12 of the 13 files in this batch to the
matching primitive/token, no visual/behavioral change intended:

• Plain-sans micro text (9-11.5px, no font-mono) snaps to mg-type-caption
  (12px) -- the smallest sans step on the scale; there's no sub-12px sans
  token, so this is a sub-2px size normalization, same tolerance already
  established for the 12/13px caption band itself.
• subnets-highlights.tsx's one 15px value gets an exact-match inline
  style against the already-defined-but-unconsumed --mg-type-body-lg
  var, rather than approximating.
• take-management-modal.tsx's direction-toggle segmented control now
  wraps in , with the flex layout moved to bodyClassName so the
  buttons stay direct flex children instead of nesting under Panel's own
  padding wrapper.
• wallet-connect.tsx's wallet-picker link now uses from
  @jsonbored/ui-kit instead of a hand-rolled +
  safeExternalUrl call.

validators-compare-drawer.tsx's 3 sticky-cell z-[1]/z-[2] values are
deliberately left as-is -- CONTRIBUTING.md documents this exact file's
sticky corner cell as the one standing exception to the --mg-z-* scale
(local table stacking context, not a global layer), and its sibling
subnets-compare-drawer.tsx carries the identical untouched pattern.
Converting it would fight the documented intent for no real benefit.

Closes #8171.

Screenshots

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

[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.82%. Comparing base (2865cb9) to head (a8529fe).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8183   +/-   ##
=======================================
  Coverage   97.82%   97.82%           
=======================================
  Files         415      415           
  Lines       28893    28893           
  Branches    10850    10850           
=======================================
  Hits        28265    28265           
  Misses        141      141           
  Partials      487      487           

🚀 New features to boost your workflow:

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

[loopover-orb]

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-26 00:38:10 UTC}

12 files · 1 AI reviewer · no blockers · 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/components/metagraphed/subnets-highlights.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/surface-fixture.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/table-controls.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/take-management-modal.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/validator-apy-panel.tsx (matched apps/ui/**), and 7 more.

Review summary
This is a mechanical CSS-class swap PR: raw `text-[Npx]` micro-text sizes become `mg-type-caption` (or `mg-type-data` where mono/data styling applies), one raw padding, a hand-rolled toggle wrapped in `<Panel>`, and a manual `<a target=_blank>` replaced with `<ExternalLink>` from `@​jsonbored/ui-kit`. The diff matches the PR description closely and full file content confirms all new symbols (`Panel`, `ExternalLink`) are imported correctly at the top of each file.

Nits — 7 non-blocking

• table-controls.tsx:108 changes `pr-14` to `pr-16` on the search input — this padding tweak isn't mentioned in the PR description (which only claims token swaps) and looks like an incidental, undocumented change.
• verify-surface-button.tsx:31 uses `mg-type-data` instead of `mg-type-caption` like every other 11px→token conversion in this batch — likely intentional given the mono/data content in that button, but worth a one-line note in the description since it breaks the stated pattern.
• take-management-modal.tsx's new `bodyClassName="inline-flex items-center !p-0.5"` relies on an `!important` override of Panel's own padding, which is a slightly fragile way to fit the segmented-control layout into the shared Panel primitive.
• Add a short comment or description line explaining the `pr-14`→`pr-16` change in table-controls.tsx if it's intentional, since it's the one non-token-swap functional change hidden in this otherwise pure-refactor PR.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• Possible screenshot-table issue: pair 1 — Advisory only — verify the screenshot-table images against the stated change before deciding.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ⚠️ Gate result — Not blocking (Advisory; not blocking this PR.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#8171
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	⚠️ 20/25	Preflight is ready, but the PR body does not name the validation run.
Contributor workload	✅ 10/10	Author activity: 44 registered-repo PR(s), 28 merged, 0 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	bitfathers94; Gittensor profile; 44 PR(s), 0 issue(s).

Linked issue satisfaction

Partially addressed
12 of the 13 listed files are converted to token/primitive equivalents (mg-type-caption, Panel, ExternalLink, etc.), but validator-compare-drawer.tsx's 3 z-[1]/z-[2] violations are deliberately left unconverted, and the issue explicitly states that a PR fixing only some of the listed files does not satisfy it.

Review context

• Author: bitfathers94
• 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: 44 PR(s), 0 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Add validation command/output.

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.

🧪 Chat with LoopOver

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

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

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

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

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

Scroll preview

Route	Before (production)	After (this PR's preview)
/	before / (scroll)	after / (scroll)

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

_{🟩 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 LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review