From 57746583b6970ab25dfc72b6e649843bbb9c5430 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sun, 12 Apr 2026 03:45:26 +0100
Subject: [PATCH] [#836] Fix desktop stats boxes falling below Moleskine cover

Replace grid-template-areas with explicit grid placement (row-span,
col-span, col-start) so the cover spans both rows on desktop and
stats sit beside it in column 2. Mobile layout unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json                         |  2 +-
 src/app/story/[storylineId]/page.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index de308ca4..b77f0774 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 77d72d5f..abe3bcd2 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -316,10 +316,10 @@ function StoryHeader({
 
   return (
     <header
-      className="pb-6 grid gap-x-4 sm:gap-x-6 grid-cols-[130px_1fr] sm:grid-cols-[160px_1fr] [grid-template-areas:'cover_info'_'stats_stats'] sm:[grid-template-areas:'cover_info'_'cover_stats']"
+      className="pb-6 grid gap-x-4 sm:gap-x-6 grid-cols-[130px_1fr] sm:grid-cols-[160px_1fr]"
     >
       {/* Moleskine book cover */}
-      <div className="[grid-area:cover]">
+      <div className="sm:row-span-2">
         <div
           className="relative flex flex-col overflow-hidden border border-[var(--border)]"
           style={{
@@ -352,7 +352,7 @@ function StoryHeader({
       </div>
 
       {/* Info column */}
-      <div className="[grid-area:info] min-w-0">
+      <div className="min-w-0">
         <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
           {storyline.title}
         </h1>
@@ -380,8 +380,8 @@ function StoryHeader({
         </div>
       </div>
 
-      {/* Stats + CTA — rendered once, repositioned via grid areas */}
-      <div className="[grid-area:stats]">
+      {/* Stats + CTA */}
+      <div className="col-span-2 sm:col-span-1 sm:col-start-2">
         {statsGrid && <div className="mt-4 sm:mt-6">{statsGrid}</div>}
         <div className="[&_a]:w-full [&_div]:w-full sm:[&_a]:w-auto sm:[&_div]:w-auto">{ctaButton}</div>
       </div>