Skip to content

[Bug] Desktop: stats boxes fall below Moleskine cover instead of beside it #836

@realproject7

Description

@realproject7

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

  • Desktop: stats boxes sit to the RIGHT of the cover, below the info text, with spacing
  • Desktop: stats do NOT fall below the cover section
  • Desktop: "Add a new Plot" also in the right column
  • Mobile: NO changes — current mobile layout must be preserved exactly
  • Spacing between info rows and stats on desktop (mt-5 or mt-6)

Branch

task/<issue>-desktop-stats-beside-cover

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agentbugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions