From 0d448e03da8d621c11f37baf35b1cfba07575224 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 4 Apr 2026 06:17:01 +0100
Subject: [PATCH 1/2] [#822] Replace dual-render hidden/block pattern with CSS
 grid-template-areas

Stats grid and CTA button were rendered twice in DOM (hidden sm:block +
sm:hidden), causing MarketCapBox and DeadlineCountdown to mount twice
with duplicate API calls and timers. Now rendered once and repositioned
via grid-template-areas for mobile vs desktop layout.

Fixes #822

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx | 128 +++++++++++++--------------
 1 file changed, 61 insertions(+), 67 deletions(-)

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index bb660fc4..c97788ce 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -315,82 +315,76 @@ function StoryHeader({
   );
 
   return (
-    <header className="pb-6">
-      <div className="flex flex-row items-start gap-4 sm:gap-6">
-        {/* Moleskine book cover */}
-        <div className="shrink-0 w-[100px] sm:w-[160px]">
+    <header
+      className="pb-6 grid gap-x-4 sm:gap-x-6 grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr] [grid-template-areas:'cover_info'_'stats_stats'] sm:[grid-template-areas:'cover_info'_'._stats']"
+    >
+      {/* Moleskine book cover */}
+      <div className="[grid-area:cover]">
+        <div
+          className="relative flex flex-col overflow-hidden border border-[var(--border)]"
+          style={{
+            aspectRatio: "2/3",
+            borderRadius: "5px 12px 12px 5px",
+            backgroundColor: "#F5EFE6",
+            boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
+          }}
+        >
           <div
-            className="relative flex flex-col overflow-hidden border border-[var(--border)]"
-            style={{
-              aspectRatio: "2/3",
-              borderRadius: "5px 12px 12px 5px",
-              backgroundColor: "#F5EFE6",
-              boxShadow: "2px 4px 8px rgba(44, 24, 16, 0.08)",
-            }}
-          >
-            <div
-              className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
-              style={{ background: "rgba(139, 69, 19, 0.15)" }}
-            />
-            <div className="relative z-10 px-2.5 pt-2.5">
-              <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
-                {storyline.genre || "Uncategorized"}
-              </span>
-            </div>
-            <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
-              <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
-                {storyline.title}
-              </span>
-            </div>
-            <div className="relative z-10 px-2.5 pb-2.5">
-              <span className="text-[8px] text-[var(--text-muted)]">
-                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-              </span>
-            </div>
+            className="pointer-events-none absolute inset-y-[-1px] right-[16px] z-20 w-[5px] rounded-[2px]"
+            style={{ background: "rgba(139, 69, 19, 0.15)" }}
+          />
+          <div className="relative z-10 px-2.5 pt-2.5">
+            <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-widest text-[var(--accent)]">
+              {storyline.genre || "Uncategorized"}
+            </span>
+          </div>
+          <div className="relative z-10 flex flex-1 items-center justify-center px-3 text-center">
+            <span className="font-heading text-sm sm:text-base font-bold leading-tight text-[var(--accent)]">
+              {storyline.title}
+            </span>
+          </div>
+          <div className="relative z-10 px-2.5 pb-2.5">
+            <span className="text-[8px] text-[var(--text-muted)]">
+              {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
+            </span>
           </div>
         </div>
+      </div>
 
-        {/* Right column: info + stats (desktop only) */}
-        <div className="min-w-0 flex-1">
-          <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
-            {storyline.title}
-          </h1>
-          <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
-            <RatingSummary storylineId={storyline.storyline_id} separator />
-            <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+      {/* Info column */}
+      <div className="[grid-area:info] min-w-0">
+        <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
+          {storyline.title}
+        </h1>
+        <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+          <RatingSummary storylineId={storyline.storyline_id} separator />
+          <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+        </div>
+        <div className="mt-2 space-y-1 text-xs">
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted w-12 shrink-0">Writer</span>
+            <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
+              <WriterIdentity address={storyline.writer_address} />
+            </Suspense>
+            {storyline.writer_type === 1 && <AgentBadge />}
           </div>
-          <div className="mt-2 space-y-1 text-xs">
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted w-12 shrink-0">Writer</span>
-              <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
-                <WriterIdentity address={storyline.writer_address} />
-              </Suspense>
-              {storyline.writer_type === 1 && <AgentBadge />}
-            </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-muted w-12 shrink-0">Genre</span>
-              <span className="text-foreground font-medium">
-                {storyline.genre || "Uncategorized"}
-                {storyline.language && storyline.language !== "English" && (
-                  <span className="text-muted ml-1.5">· {storyline.language}</span>
-                )}
-              </span>
-            </div>
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted w-12 shrink-0">Genre</span>
+            <span className="text-foreground font-medium">
+              {storyline.genre || "Uncategorized"}
+              {storyline.language && storyline.language !== "English" && (
+                <span className="text-muted ml-1.5">· {storyline.language}</span>
+              )}
+            </span>
           </div>
-
-          {/* Stats + CTA — desktop only (inside right column) */}
-          {statsGrid && (
-            <div className="hidden sm:block mt-6">{statsGrid}</div>
-          )}
-          <div className="hidden sm:block">{ctaButton}</div>
         </div>
       </div>
 
-      {/* Stats + CTA — mobile only (full-width below cover+info row) */}
-      {statsGrid && (
-        <div className="sm:hidden mt-4">{statsGrid}</div>
-      )}
-      <div className="sm:hidden [&_a]:w-full [&_div]:w-full">{ctaButton}</div>
+      {/* Stats + CTA — rendered once, repositioned via grid areas */}
+      <div className="[grid-area:stats] mt-4 sm:mt-6">
+        {statsGrid}
+        <div className="[&_a]:w-full [&_div]:w-full sm:[&_a]:w-auto sm:[&_div]:w-auto">{ctaButton}</div>
+      </div>
     </header>
   );
 }

From 8ece4a2c1826eb556e40e28291cd3a4e6c6986a9 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 4 Apr 2026 06:21:21 +0100
Subject: [PATCH 2/2] [#822] Move responsive margin to statsGrid only, not
 wrapper

Fixes empty vertical space on untokenized stories where priceInfo is
null and AddPlotButton renders null.

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index c97788ce..cf75c45f 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -381,8 +381,8 @@ function StoryHeader({
       </div>
 
       {/* Stats + CTA — rendered once, repositioned via grid areas */}
-      <div className="[grid-area:stats] mt-4 sm:mt-6">
-        {statsGrid}
+      <div className="[grid-area:stats]">
+        {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>
     </header>