Portfolio tab v4 — structured rows, exact wireframe

[realproject7]

Problem

Portfolio tab still looks messy on mobile — genre tag breaks layout, inline stats wrap unpredictably, sections have inconsistent spacing.

Solution: structured label-value rows

Same approach as Stories v4 — predictable grid positions, no inline wrapping.

Exact mobile wireframe (375px) — follow this precisely

Portfolio summary

```
┌──────────────────────────────────┐
│ PORTFOLIO │
│ │
│ Value 37.56 PLOT $0.661 │
│ Tokens 1 │
│ Best 24h Straton +5.5% │
└──────────────────────────────────┘
```

Token holding card

```
┌──────────────────────────────────┐
│ Straton Science Fi │
│ │
│ Value 37.56 PLOT $0.661 │
│ Change +5.5% │
│ Balance 12,000 tokens │
│ Price 0.0031 PLOT <$0.01 │
│ Entry 0.0031 PLOT <$0.01 │
│ Traded Mar 31 │
└──────────────────────────────────┘
```

Donations

```
┌──────────────────────────────────┐
│ DONATIONS │
│ │
│ Received 150.00 PLOT $2.64 │
│ from 1 donation │
│ │
│ Given 300.00 PLOT $5.28 │
│ 3 donations │
│ │
│ Story #38 50 PLOT Mar 31 ↗ │
│ Story #42 100 PLOT Mar 31 ↗ │
│ Story #43 150 PLOT Mar 31 ↗ │
└──────────────────────────────────┘
```

Trading history

```
┌──────────────────────────────────┐
│ TRADES 1 trade │
│ │
│ Buy Straton │
│ 12,000 tokens 36.77 PLOT $0.65 │
│ Mar 31 ↗ │
└──────────────────────────────────┘
```

Implementation rules

1. `grid grid-cols-[auto_1fr]` for label-value pairs — label left muted, value right
2. Genre tag: inline with title, use `text-[9px]` — don't let it break to new line
3. Each section: bordered card with section header
4. Donation/trade rows: consistent format — story name left, amount right, date + link below
5. No inline flex-wrap — every piece of data has a grid position
6. Numbers right-aligned with USD in muted text

Desktop (md+)

Holdings can show side-by-side value/change/balance/price in wider grid. Donation rows can be single-line.

Use `/frontend-design` skill

Files to modify

• `src/app/profile/[address]/page.tsx` — Portfolio tab

Branch

`task/723-portfolio-v4`

Self-Verification (T3)

• Mobile (375px): every label-value pair on a predictable row
• Genre tag doesn't break layout (inline with title or omitted if too long)
• Portfolio summary clean: value, tokens, best pick each on own row
• Holdings: all stats in label-value grid
• Donations: received/given clearly separated
• Trade rows: consistent format, no wrapping
• Desktop scales up
• No inline flex-wrap for stats
• `npm run build` passes