Stories tab v4 — structured label-value rows, exact wireframe

[realproject7]

Problem

Stories tab has been redesigned 3 times and still looks bad on mobile. The root issue: using inline `flex-wrap` with tiny text that wraps unpredictably. Each stat lands on a different line depending on screen width.

Solution: structured label-value rows

Stop using inline wrapping text. Use predictable two-column label-value rows where every piece of data has a fixed position.

Exact mobile wireframe (375px) — follow this precisely

Writer summary (top)

```
┌──────────────────────────────────┐
│ WRITER STATS │
│ │
│ Stories 1 Plots 4 │
│ Holders 2 Views 26 │
│ Donated 150.00 PLOT ($2.64) │
│ Claimable 4.23 PLOT ($0.07) │
└──────────────────────────────────┘
```

• 2-column grid: `grid-cols-2` for Stories/Plots and Holders/Views
• Full-width rows for Donated and Claimable (label left, value right)
• Claimable row only shows for own profile

Per-storyline card

```
┌──────────────────────────────────┐
│ Straton │
│ Science Fiction · active │
├──────────────────────────────────┤
│ Price 0.0031 PLOT <$0.01 │
│ TVL 528.61 PLOT $9.30 │
│ Plots 4 Holders 2 │
│ Views 26 Created Mar │
│ Donations 150 PLOT $2.64 │
├──────────────────────────────────┤
│ ⏰ Next plot due in 2d 0h 57m │
├──────────────────────────────────┤
│ Royalties 4.2289 PLOT $0.07 │
│ [Claim] │
├──────────────────────────────────┤
│ DONATION HISTORY │
│ 0x4d68..b6c8 Mar 31 150 PLOT ↗│
└──────────────────────────────────┘
```

Implementation rules

1. Use `grid grid-cols-[auto_1fr]` for label-value pairs — label left-aligned muted, value right-aligned foreground
2. Use `grid grid-cols-2` for paired stats (Plots/Holders, Views/Created)
3. Bordered card with internal dividers (`divide-y`) for sections
4. Title section: storyline name as `text-sm font-medium`, genre + status on second line
5. Numbers: right-aligned, USD in muted parentheses on same line
6. Royalties: truncate to 4 decimals max (`4.2289` not `4.2288977252`)
7. No inline flex-wrap for stats — every item has a predictable grid position
8. Royalties + Claim section and Donation History: own profile only

Desktop (md+)

Same card structure but can use wider grid — e.g., Price/TVL side by side, Plots/Holders/Views/Created in one row.

Use `/frontend-design` skill

Files to modify

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

Branch

`task/722-stories-v4`

Self-Verification (T3)

• Mobile (375px): every label-value pair on a predictable row — no wrapping surprises
• Title + genre + status clearly separated from stats
• Price and TVL each on their own row with USD
• Royalties truncated to 4 decimals
• Claim button right-aligned on royalties row
• Donation history rows don't overflow
• Desktop scales up (wider grid or side-by-side)
• No inline flex-wrap for stat text
• `npm run build` passes