Problem
The CSS grid-template-areas change (PR #825) broke the desktop layout again. Stats boxes and CTA button are in a full-width row BELOW the cover+info area, not in the right column next to the cover.
Mobile view is now perfect — DO NOT touch it.
Current (broken desktop)
┌──────────┐ Title / Rating / Writer / Genre
│ Moleskine│
│ │ (big empty space)
│ │
└──────────┘
┌─────────────────────────────────────────────┐
│ Market Cap │ Supply │ Deadline │ ← full width, BELOW the cover
└─────────────────────────────────────────────┘
Expected desktop
┌──────────┐ Title / Rating / Writer / Genre
│ Moleskine│
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ │ │ Mkt Cap │ │ Supply │ │ Deadline │
│ │ └──────────┘ └──────────┘ └──────────┘
└──────────┘ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ Token $ │ │ Plots │ │ Created │
└──────────┘ └──────────┘ └──────────┘
[+ Add a new Plot]
Root Cause
The grid-template-areas on desktop is 'cover info' / '. stats' — this creates a separate ROW for stats below the cover/info row. What we need is for stats to be WITHIN the info area, not a separate grid row.
Solution
Desktop only (sm+ breakpoint) — keep the mobile grid-template-areas unchanged:
Option A: On desktop, change to a 3-row grid where the cover spans all rows:
sm:[grid-template-areas:'cover_info'_'cover_stats'_'cover_cta']
sm:grid-rows-[auto_auto_auto]
With [grid-row:1/span_3] or [grid-row:1/-1] on the cover so it spans all rows.
Option B: On desktop, don't use grid-template-areas at all — just put stats inside the info area as a nested element (like PR #819 did) using sm: visibility. Keep mobile grid-template-areas as-is.
CRITICAL: Do not change the mobile layout. It is perfect right now.
Acceptance Criteria
Branch
task/<issue>-desktop-stats-beside-cover
Problem
The CSS grid-template-areas change (PR #825) broke the desktop layout again. Stats boxes and CTA button are in a full-width row BELOW the cover+info area, not in the right column next to the cover.
Mobile view is now perfect — DO NOT touch it.
Current (broken desktop)
Expected desktop
Root Cause
The grid-template-areas on desktop is
'cover info' / '. stats'— this creates a separate ROW for stats below the cover/info row. What we need is for stats to be WITHIN the info area, not a separate grid row.Solution
Desktop only (sm+ breakpoint) — keep the mobile grid-template-areas unchanged:
Option A: On desktop, change to a 3-row grid where the cover spans all rows:
With
[grid-row:1/span_3]or[grid-row:1/-1]on the cover so it spans all rows.Option B: On desktop, don't use grid-template-areas at all — just put stats inside the info area as a nested element (like PR #819 did) using
sm:visibility. Keep mobile grid-template-areas as-is.CRITICAL: Do not change the mobile layout. It is perfect right now.
Acceptance Criteria
Branch
task/<issue>-desktop-stats-beside-cover