Problem
On mobile (375px), the Story Token Holdings card in the Reader tab overflows. The Moleskine book (130px) + 4-box stat grid in flex-row leaves too little space for the stat boxes.
Specific issues:
- PnL box: "+$0.095 +7.9%" text gets cut off horizontally
- First Traded box: "Mar 31, 2026" text is too large for the box width
- Overall the 4 stat boxes are squeezed into ~200px remaining width (375 - 130 book - 32 padding - 16 gap)
Root Cause
profile/[address]/page.tsx line ~1489: flex flex-row items-center gap-4 doesn't stack on mobile. The 2×2 stat grid at text-sm is too large for the remaining space.
Fix
Option A: On mobile, stack vertically — Moleskine on top, stat grid below (full width)
Option B: Reduce stat box text to text-xs on mobile, shorten formats (e.g., "Mar 31" without year, compact PnL)
Recommended: Option A — use flex-col sm:flex-row so the layout stacks on small screens.
Branch
task/762-reader-mobile-overflow
Problem
On mobile (375px), the Story Token Holdings card in the Reader tab overflows. The Moleskine book (130px) + 4-box stat grid in
flex-rowleaves too little space for the stat boxes.Specific issues:
Root Cause
profile/[address]/page.tsxline ~1489:flex flex-row items-center gap-4doesn't stack on mobile. The 2×2 stat grid attext-smis too large for the remaining space.Fix
Option A: On mobile, stack vertically — Moleskine on top, stat grid below (full width)
Option B: Reduce stat box text to
text-xson mobile, shorten formats (e.g., "Mar 31" without year, compact PnL)Recommended: Option A — use
flex-col sm:flex-rowso the layout stacks on small screens.Branch
task/762-reader-mobile-overflow