Stories + Portfolio tab v5 — polish fixes with exact specs

[realproject7]

Overview

The v4 grid layout is structurally correct but needs polish. This ticket covers both Stories and Portfolio tabs with exact specifications.

---

Stories tab fixes

1. Writer Stats — natural inline numbers

Current (bad): `Stories 1` (wide gap from grid)
After: `Stories: 1` — label and value naturally next to each other

Change from `grid-cols-[auto_1fr]` with right-aligned values to simple inline text:
```
Stories: 1 · Plots: 4 · Holders: 2 · Views: 26
Donated: 150.00 PLOT ($2.64)
Claimable: 4.23 PLOT ($0.074)
```

Use a simple 2-column layout for the first row, full-width for Donated/Claimable. Values right next to labels, not pushed to the far right.

2. Book title — Lora font, accent color, bold

```tsx

{storyline.title}

\`\`\`

`font-body` is already mapped to Lora. Make it bold + accent color.

3. Genre + active as tag badges, not plain text

Current: `Science Fiction active` (plain text)
After: `[Science Fiction] [active]`

```tsx
Science Fiction
active
```

4. Remove deadline white box — use regular row

Current: Deadline inside a separate bordered/highlighted box
After: Just another row in the stats grid:

```
Deadline 2d 0h 21m 10s
```

Same styling as Price/TVL rows. Accent color on the countdown value.

5. Royalties — structured multi-line layout

Current (broken on mobile): Everything crammed on one line, royalty number overflows

After:
```
┌──────────────────────────────────┐
│ ROYALTIES │
│ │
│ Claimable 4.2289 PLOT $0.074 │
│ [Claim] │
│ │
│ Claimed 4.2289 PLOT $0.074 │
└──────────────────────────────────┘
```

• "ROYALTIES" as section header (same style as "WRITER STATS", "DONATION HISTORY")
• Claimable on its own row with Claim button right-aligned on next line
• Claimed on separate row below
• Truncate ALL royalty numbers to 4 decimals max
• Remove the confusing inline `(claimed: X PLOT so far)` format

6. Unified content font size

All content text (labels, values, stats) should use `text-xs` (12px) consistently. Only exceptions:

• Storyline title: `text-base` (16px) — Lora bold accent
• Tag badges: `text-[10px]`
• Section headers (WRITER STATS, ROYALTIES): `text-[10px] uppercase tracking-wider`

No `text-[11px]` or `text-[9px]` for content — pick one size and stick with it.

---

Portfolio tab fixes (same rules)

7. Apply same polish rules

• Labels + values naturally adjacent (not pushed to far right with wide gap)
• Genre as tag badge, not plain text
• Unified `text-xs` content font size
• Holding title in Lora bold accent
• Numbers right-aligned but labels left-aligned in the same visual group

---

Files to modify

• `src/app/profile/[address]/page.tsx` — Stories tab + Portfolio tab
• `src/components/ClaimRoyalties.tsx` — restructure royalties display

Branch

`task/728-stories-portfolio-polish`

Self-Verification (T3)

• Writer Stats: numbers naturally next to labels (Stories: 1, not Stories 1)
• Storyline title: Lora font (`font-body`), bold, accent color
• Genre + active: tag badges with background/border, not plain text
• Deadline: regular row, no white box wrapper
• Royalties: ROYALTIES header, Claimable row + Claim button, Claimed row — separate lines
• All royalty numbers truncated to 4 decimals
• Content font size: `text-xs` consistently (no text-[11px] or text-[9px])
• Portfolio tab: same rules applied (labels natural, genre as badge, unified font)
• Mobile (375px): nothing overflows or breaks
• `npm run build` passes