From 5b91ee0f9f8937e095af2e518eae820ec36523a7 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 16:39:20 +0100
Subject: [PATCH 1/4] [#816] Unify storyline header: all content next to cover

Merge Zone 1 and Zone 2 into one unified header. Cover + title +
info + stats + CTA all in a single side-by-side flex layout.

- Mobile: cover left (100px) + info/stats/CTA right (flex-row always)
- Desktop: cover left (160px) + everything right
- Removed border-b separation between hero and stats
- Stats grid + AddPlotButton now inside the right column
- Cover left-aligned on mobile (not centered)

Fixes #816

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index c197937f..e872812f 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -263,128 +263,128 @@ function StoryHeader({
     : null;
 
   return (
-    <>
-      {/* Zone 1: Hero — Cover + Identity */}
-      <header className="border-border border-b pb-6">
-        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
-          {/* Moleskine book cover */}
-          <div className="shrink-0 w-[130px] sm:w-[160px]">
+    <header className="pb-6">
+      <div className="flex flex-row items-start gap-4">
+        {/* Moleskine book cover — left-aligned on all sizes */}
+        <div className="shrink-0 w-[100px] sm:w-[160px]">
+          <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>
-
-          {/* Info panel */}
-          <div className="min-w-0 w-full sm:flex-1">
-            <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
-              {storyline.title}
-            </h1>
-            <div className="mt-1.5 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 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="mt-3 space-y-1.5 text-xs">
-              <div className="flex items-center gap-1.5">
-                <span className="text-muted w-14 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-14 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="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>
-      </header>
-
-      {/* Zone 2: Stats Card + Action */}
-      {priceInfo && (
-        <div className="border-border rounded border px-3 py-3 mt-4">
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-            {/* Row 1 */}
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <MarketCapBox
-                tokenAddress={storyline.token_address}
-                totalSupply={parseFloat(priceInfo.totalSupply)}
-                pricePerToken={parseFloat(priceInfo.pricePerToken)}
-              />
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
-              <div className="text-muted text-[9px]">Supply Minted</div>
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              {storyline.sunset ? (
-                <>
-                  <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
-                  <div className="text-muted text-[9px]">Complete</div>
-                </>
-              ) : storyline.has_deadline && storyline.last_plot_time ? (
-                <>
-                  <div className="text-foreground text-sm font-bold leading-tight">
-                    <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
-                  </div>
-                  <div className="text-muted text-[9px]">Deadline</div>
-                </>
-              ) : (
-                <>
-                  <div className="text-foreground text-sm font-bold">—</div>
-                  <div className="text-muted text-[9px]">Deadline</div>
-                </>
-              )}
-            </div>
-            {/* Row 2 */}
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
-              <div className="text-muted text-[9px]">Token Price</div>
-            </div>
-            <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
-              <div className="text-muted text-[9px]">{storyline.plot_count === 1 ? "Plot" : "Plots"}</div>
+
+        {/* Right column: info + stats + CTA */}
+        <div className="min-w-0 flex-1">
+          {/* Title */}
+          <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
+            {storyline.title}
+          </h1>
+
+          {/* Rating + Views */}
+          <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>
+
+          {/* Info rows */}
+          <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="border-border rounded border px-2 py-1.5 text-center min-w-0">
-              <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
-              <div className="text-muted text-[9px]">Created</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>
+
+          {/* Stats grid — inside right column */}
+          {priceInfo && (
+            <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <MarketCapBox
+                  tokenAddress={storyline.token_address}
+                  totalSupply={parseFloat(priceInfo.totalSupply)}
+                  pricePerToken={parseFloat(priceInfo.pricePerToken)}
+                />
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{formatSupply(priceInfo.totalSupply)}</div>
+                <div className="text-muted text-[9px]">Supply Minted</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                {storyline.sunset ? (
+                  <>
+                    <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+                    <div className="text-muted text-[9px]">Complete</div>
+                  </>
+                ) : storyline.has_deadline && storyline.last_plot_time ? (
+                  <>
+                    <div className="text-foreground text-sm font-bold leading-tight">
+                      <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel valueClassName="text-foreground text-sm font-bold" />
+                    </div>
+                    <div className="text-muted text-[9px]">Deadline</div>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-foreground text-sm font-bold">—</div>
+                    <div className="text-muted text-[9px]">Deadline</div>
+                  </>
+                )}
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{formatPrice(priceInfo.pricePerToken)} {RESERVE_LABEL}</div>
+                <div className="text-muted text-[9px]">Token Price</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{storyline.plot_count}</div>
+                <div className="text-muted text-[9px]">{storyline.plot_count === 1 ? "Plot" : "Plots"}</div>
+              </div>
+              <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
+                <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
+                <div className="text-muted text-[9px]">Created</div>
+              </div>
+            </div>
+          )}
+
+          {/* CTA — in right column, auto-width */}
+          <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
         </div>
-      )}
-      <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
-    </>
+      </div>
+    </header>
   );
 }
 

From 0c785000090918f216993ae42e0a7ce6be9c3dac Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 16:42:04 +0100
Subject: [PATCH 2/4] [#816] Make AddPlotButton auto-width instead of
 full-width

Remove w-full from both active and disabled states. Use inline-block
with px-6 padding so the button fits naturally in the right column
instead of spanning full width.

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

diff --git a/src/components/AddPlotButton.tsx b/src/components/AddPlotButton.tsx
index 516bbb42..57ea496f 100644
--- a/src/components/AddPlotButton.tsx
+++ b/src/components/AddPlotButton.tsx
@@ -32,7 +32,7 @@ export function AddPlotButton({
   if (expired) {
     return (
       <div
-        className="border-border text-muted mt-3 block w-full rounded border py-2 text-center text-xs font-medium opacity-50"
+        className="border-border text-muted mt-3 block rounded border py-2 text-center text-xs font-medium opacity-50"
         title={sunset ? "This story has sunset" : "The 7-day deadline has expired"}
       >
         {sunset ? "Story complete" : "Deadline expired"}
@@ -43,7 +43,7 @@ export function AddPlotButton({
   return (
     <Link
       href={`/create?tab=chain&storyline=${storylineId}`}
-      className="border-accent text-accent hover:bg-accent/10 mt-3 block w-full rounded border py-2 text-center text-xs font-medium transition-colors"
+      className="border-accent text-accent hover:bg-accent/10 mt-3 inline-block rounded border px-6 py-2 text-center text-xs font-medium transition-colors"
     >
       + Add a new Plot
     </Link>

From b165e37e364e3a6b095be9500f3851bcc6c74ab1 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 16:44:38 +0100
Subject: [PATCH 3/4] [#816] Move stats + CTA below cover+info row on mobile

Stats grid and AddPlotButton now render outside the cover+info
flex-row. On desktop, sm:pl-[176px] (160px cover + 16px gap) aligns
them with the right column. On mobile, they span full width below
the cover+info row.

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index e872812f..e2ebc9c2 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -298,20 +298,15 @@ function StoryHeader({
           </div>
         </div>
 
-        {/* Right column: info + stats + CTA */}
+        {/* Right column: info only */}
         <div className="min-w-0 flex-1">
-          {/* Title */}
           <h1 className="font-body text-xl sm:text-2xl font-bold tracking-tight text-accent">
             {storyline.title}
           </h1>
-
-          {/* Rating + Views */}
           <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>
-
-          {/* Info rows */}
           <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>
@@ -330,9 +325,13 @@ function StoryHeader({
               </span>
             </div>
           </div>
+        </div>
+      </div>
 
-          {/* Stats grid — inside right column */}
-          {priceInfo && (
+      {/* Stats grid — below cover+info on mobile, aligned with right column on desktop */}
+      {priceInfo && (
+        <div className="sm:pl-[176px]">
+          <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
             <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
               <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
                 <MarketCapBox
@@ -378,11 +377,13 @@ function StoryHeader({
                 <div className="text-muted text-[9px]">Created</div>
               </div>
             </div>
-          )}
-
-          {/* CTA — in right column, auto-width */}
-          <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
+          </div>
         </div>
+      )}
+
+      {/* CTA — below stats, aligned with right column on desktop */}
+      <div className="sm:pl-[176px]">
+        <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
       </div>
     </header>
   );

From c3a10ab16d232ed9b08c18208a8184c1b6fbe22f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 16:46:46 +0100
Subject: [PATCH 4/4] [#816] Fix duplicated grid wrapper, make disabled button
 auto-width

Remove duplicated nested grid div in stats section. Fix disabled
AddPlotButton state to use inline-block + px-6 matching active state.

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index e2ebc9c2..ddf81aec 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -332,7 +332,6 @@ function StoryHeader({
       {priceInfo && (
         <div className="sm:pl-[176px]">
           <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
-            <div className="mt-3 grid grid-cols-2 sm:grid-cols-3 gap-1.5">
               <div className="border-border rounded border px-2 py-1.5 text-center min-w-0">
                 <MarketCapBox
                   tokenAddress={storyline.token_address}
@@ -376,7 +375,6 @@ function StoryHeader({
                 <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
                 <div className="text-muted text-[9px]">Created</div>
               </div>
-            </div>
           </div>
         </div>
       )}
diff --git a/src/components/AddPlotButton.tsx b/src/components/AddPlotButton.tsx
index 57ea496f..3465ab00 100644
--- a/src/components/AddPlotButton.tsx
+++ b/src/components/AddPlotButton.tsx
@@ -32,7 +32,7 @@ export function AddPlotButton({
   if (expired) {
     return (
       <div
-        className="border-border text-muted mt-3 block rounded border py-2 text-center text-xs font-medium opacity-50"
+        className="border-border text-muted mt-3 inline-block rounded border px-6 py-2 text-center text-xs font-medium opacity-50"
         title={sunset ? "This story has sunset" : "The 7-day deadline has expired"}
       >
         {sunset ? "Story complete" : "Deadline expired"}