fix(ui): give the per-UID yield leaderboard a mobile card layout

[jeffrey701]

Summary

The per-UID Yield leaderboard (yield-panel.tsx, Metagraph tab) renders a 7-column table (UID / Hotkey / Role / Stake / Emission / Yield / vs median) inside an overflow-hidden card. At mobile width the table is wider than the viewport, so its two rightmost columns — Yield % and the vs-median indicator, the entire point of a ranked yield page — are clipped off-screen. The table sits in an overflow-x-auto wrapper, so it is technically scrollable, but the default (unscrolled) mobile view still hides yield/vs-median behind an undiscoverable horizontal scroll (#3708).

This re-flows each row into a stacked card below md that surfaces yield + vs-median prominently per UID, mirroring the same cards-below-md / table-at-md+ split ListShell already uses for the app's paginated leaderboards (and the merged stake-transfer leaderboard fix). At md and up the existing table is unchanged — it comfortably fits its 7 columns at ≥768px.

What changed

• apps/ui/src/components/metagraphed/yield-panel.tsx — the leaderboard block only: added a md:hidden card list (UID + role badge, yield % + vs-median arrow top-right, hotkey + stake·emission below) alongside the existing table, now wrapped hidden md:block. No columns, data, sorting, TOP_N, or the overflow-x-auto table fallback changed — a < md-only presentation change.

Screenshots

Captured on /subnets/64?tab=metagraph (per-UID yield leaderboard) with a fixture matching the real SubnetYield contract shape driving the actual component code (the live /api/v1/subnets/{netuid}/yield returns an empty neuron set in this environment, same approach as the merged stake-transfer fix). Fixed viewports (Mobile 375×812, Tablet 768×1024, Desktop 1280×800), both themes forced via localStorage.setItem("mg-theme", …), deviceScaleFactor: 1.

The change is scoped to < md, so the Mobile rows carry the fix (before: table clipped at Emission, Yield/vs-median gone → after: cards surfacing yield + vs-median per UID). Tablet/Desktop keep the identical table and are included for the full matrix (before = after there).

Viewport · Theme	Before	After
Desktop · Light	before	after (table unchanged)
Desktop · Dark	before	after (table unchanged)
Tablet · Light	before	after (table unchanged)
Tablet · Dark	before	after (table unchanged)
Mobile · Light	before — Yield / vs-median clipped	after — cards surface yield + vs-median
Mobile · Dark	before — Yield / vs-median clipped	after — cards surface yield + vs-median

Validation

• tsc --noEmit — clean (after building packages/client, as CI does)
• eslint — 0 errors on the changed file
• prettier --check — clean
• vitest run — yield-format + yield-percentile-layout suites pass (15 tests)
• git diff touches only yield-panel.tsx; no columns/data/logic changed, only the < md presentation.

Closes #3935

[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.76%. Comparing base (113584b) to head (7c72747).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4836   +/-   ##
=======================================
  Coverage   97.76%   97.76%           
=======================================
  Files         162      162           
  Lines       19004    19004           
  Branches     7122     7122           
=======================================
  Hits        18579    18579           
  Misses         59       59           
  Partials      366      366           

🚀 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-11 07:56:08 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/components/metagraphed/yield-panel.tsx (matched apps/ui/src/components/**).

Review summary
AI review could not be completed for this PR head. Gittensory is holding this PR for manual review instead of relying on deterministic signals alone.

Nits — 2 non-blocking

• 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	#3935
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: 102 registered-repo PR(s), 48 merged, 15 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	jeffrey701; Gittensor profile; 102 PR(s), 15 issue(s).
Gate result	⚠️ Not blocking	Advisory; not blocking this PR.

Review context

• Author: jeffrey701
• 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: 102 PR(s), 15 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.

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

[JSONbored]

All screenshot embeds are broken, closing.