From 7c727472aa690a9f612b8696848f22d505336056 Mon Sep 17 00:00:00 2001
From: Jeff <158072326+jeffrey701@users.noreply.github.com>
Date: Fri, 10 Jul 2026 23:33:41 -0400
Subject: [PATCH] fix(ui): give the per-UID yield leaderboard a mobile card
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 7-column yield leaderboard table overflows the mobile viewport inside
its overflow-hidden card, clipping its two rightmost columns — Yield % and
the vs-median indicator, the entire point of a ranked-yield page. The
overflow-x-auto wrapper makes it technically scrollable, but the default
mobile view still hides yield/vs-median behind an undiscoverable scroll.
Below md, re-flow each row into a stacked card that surfaces yield +
vs-median per UID (mirrors the cards/table split ListShell already uses);
at md+ the existing table is unchanged. Only a < md presentation change —
no columns, data, or sorting touched.

Closes #3935
---
 .../components/metagraphed/yield-panel.tsx    | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/components/metagraphed/yield-panel.tsx b/apps/ui/src/components/metagraphed/yield-panel.tsx
index 2e3bb4d24..0b25f5494 100644
--- a/apps/ui/src/components/metagraphed/yield-panel.tsx
+++ b/apps/ui/src/components/metagraphed/yield-panel.tsx
@@ -129,7 +129,57 @@ export function YieldLoader({ netuid }: { netuid: number }) {
 
       {/* Per-UID yield leaderboard (top yielders). */}
       <div className="rounded-xl border border-border bg-card overflow-hidden">
-        <div className="overflow-x-auto">
+        {/* < md: the 7-column table needs an undiscoverable horizontal scroll to
+            reach its rightmost Yield / vs-median columns — the entire point of
+            this leaderboard — so narrow viewports get a stacked card per UID
+            that surfaces yield + vs-median prominently (mirrors the cards/table
+            split ListShell uses for paginated lists). */}
+        <div className="md:hidden divide-y divide-border/60">
+          {ranked.map((n) => (
+            <div key={n.uid} className="px-3 py-2.5">
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="font-mono text-[12px] tabular-nums text-ink-strong">
+                    #{n.uid}
+                  </span>
+                  {n.role === "validator" ? (
+                    <span className="inline-flex items-center rounded border border-accent/40 bg-accent-surface px-1.5 py-0.5 text-[9.5px] font-mono uppercase tracking-wider text-accent-text">
+                      Validator
+                    </span>
+                  ) : (
+                    <span className="font-mono text-[10px] uppercase tracking-wider text-ink-muted">
+                      Miner
+                    </span>
+                  )}
+                </div>
+                <div className="flex shrink-0 items-center gap-1.5">
+                  <span className="font-mono text-[13px] tabular-nums text-ink-strong">
+                    {fmtYield(n.yield)}
+                  </span>
+                  <VsMedian vs={n.vs_median} />
+                </div>
+              </div>
+              <div className="mt-1.5 flex items-center justify-between gap-3 font-mono text-[11px] tabular-nums text-ink-muted">
+                {n.hotkey ? (
+                  <Link
+                    to="/accounts/$ss58"
+                    params={{ ss58: n.hotkey }}
+                    className="truncate text-ink-muted hover:text-ink hover:underline"
+                    title={n.hotkey}
+                  >
+                    {shortHash(n.hotkey) ?? n.hotkey}
+                  </Link>
+                ) : (
+                  <span>—</span>
+                )}
+                <span className="shrink-0">
+                  {taoCompact(n.stake_tao)} τ · {taoCompact(n.emission_tao)} τ
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="hidden md:block overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="bg-surface/50 text-[10px] font-mono uppercase tracking-widest text-ink-muted">
               <tr>