From a9ed1a01502400f66a0b51523df90a71399a2fe0 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 22:01:33 +0100
Subject: [PATCH 1/3] [#774] Restructure storyline deadline + stats into 2-col
 grid layout

- Market Cap and Supply Minted in a 2-column bordered grid
- Deadline countdown in a full-width bordered box below with
  "Next Plot Publish Deadline" label
- Story complete box also moved into the same layout section
- All boxes stack vertically on mobile via space-y-2

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 6dd3fb6a..dde6dd6b 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -289,32 +289,39 @@ function StoryHeader({
       </div>
 
       {priceInfo && (
-        <div className="border-border bg-surface mt-4 grid grid-cols-2 gap-2 rounded border px-3 py-2 text-xs">
-          <MarketCapBox
-            tokenAddress={storyline.token_address}
-            totalSupply={parseFloat(priceInfo.totalSupply)}
-            pricePerToken={parseFloat(priceInfo.pricePerToken)}
-          />
-          <div>
-            <span className="text-muted block text-[10px] uppercase tracking-wider">
-              Supply Minted
-            </span>
-            <span className="font-semibold text-accent">
-              {formatSupply(priceInfo.totalSupply)} tokens
-            </span>
+        <div className="mt-4 space-y-2 text-xs">
+          <div className="border-border bg-surface grid grid-cols-2 gap-2 rounded border px-3 py-2">
+            <MarketCapBox
+              tokenAddress={storyline.token_address}
+              totalSupply={parseFloat(priceInfo.totalSupply)}
+              pricePerToken={parseFloat(priceInfo.pricePerToken)}
+            />
+            <div>
+              <span className="text-muted block text-[10px] uppercase tracking-wider">
+                Supply Minted
+              </span>
+              <span className="font-semibold text-accent">
+                {formatSupply(priceInfo.totalSupply)} tokens
+              </span>
+            </div>
           </div>
+          {storyline.sunset ? (
+            <div className="border-border bg-surface rounded border px-3 py-2">
+              <span className="text-muted">Story complete</span>
+              <span className="text-foreground ml-2">
+                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
+              </span>
+            </div>
+          ) : storyline.last_plot_time ? (
+            <div className="border-border bg-surface rounded border px-3 py-2">
+              <span className="text-muted block text-[10px] uppercase tracking-wider mb-1">
+                Next Plot Publish Deadline
+              </span>
+              <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
+            </div>
+          ) : null}
         </div>
       )}
-      {storyline.sunset ? (
-        <div className="border-border bg-surface mt-4 rounded border px-3 py-2 text-xs">
-          <span className="text-muted">Story complete</span>
-          <span className="text-foreground ml-2">
-            {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} total
-          </span>
-        </div>
-      ) : storyline.last_plot_time ? (
-        <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
-      ) : null}
       {!storyline.sunset && (
         <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} />
       )}

From 99d46d3a5aff036482411d8bee03c8f9f5351d20 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 22:03:54 +0100
Subject: [PATCH 2/3] [#774] Fix T2a review: stack grid on mobile, remove
 duplicate deadline label

1. Grid changed to grid-cols-1 sm:grid-cols-2 so boxes stack on mobile
2. Added hideLabel prop to DeadlineCountdown to avoid redundant
   "Deadline:" text when the parent box already has a heading

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index dde6dd6b..4b066268 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -290,7 +290,7 @@ function StoryHeader({
 
       {priceInfo && (
         <div className="mt-4 space-y-2 text-xs">
-          <div className="border-border bg-surface grid grid-cols-2 gap-2 rounded border px-3 py-2">
+          <div className="border-border bg-surface grid grid-cols-1 sm:grid-cols-2 gap-2 rounded border px-3 py-2">
             <MarketCapBox
               tokenAddress={storyline.token_address}
               totalSupply={parseFloat(priceInfo.totalSupply)}
@@ -317,7 +317,7 @@ function StoryHeader({
               <span className="text-muted block text-[10px] uppercase tracking-wider mb-1">
                 Next Plot Publish Deadline
               </span>
-              <DeadlineCountdown lastPlotTime={storyline.last_plot_time} />
+              <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
             </div>
           ) : null}
         </div>
diff --git a/src/components/DeadlineCountdown.tsx b/src/components/DeadlineCountdown.tsx
index cc934e41..cd2d92cb 100644
--- a/src/components/DeadlineCountdown.tsx
+++ b/src/components/DeadlineCountdown.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 
 const DEADLINE_HOURS = 168;
 
-export function DeadlineCountdown({ lastPlotTime }: { lastPlotTime: string }) {
+export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: string; hideLabel?: boolean }) {
   const [remaining, setRemaining] = useState<number | null>(null);
 
   useEffect(() => {
@@ -19,7 +19,7 @@ export function DeadlineCountdown({ lastPlotTime }: { lastPlotTime: string }) {
   if (remaining === null) {
     return (
       <div className="text-xs">
-        <span className="text-muted">Deadline:</span>{" "}
+        {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
         <span className="text-accent font-medium">--</span>
       </div>
     );
@@ -28,7 +28,7 @@ export function DeadlineCountdown({ lastPlotTime }: { lastPlotTime: string }) {
   if (remaining <= 0) {
     return (
       <div className="text-xs">
-        <span className="text-muted">Deadline:</span>{" "}
+        {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
         <span className="text-error font-medium">expired</span>
       </div>
     );

From edee7e1ae84af2684fd1d47f9e5719bd4c839ff3 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 22:05:46 +0100
Subject: [PATCH 3/3] [#774] Fix: apply hideLabel to normal countdown branch
 too

The replace_all missed the third render branch (active countdown).
Now all three states (null, expired, active) respect hideLabel.

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

diff --git a/src/components/DeadlineCountdown.tsx b/src/components/DeadlineCountdown.tsx
index cd2d92cb..02656a1f 100644
--- a/src/components/DeadlineCountdown.tsx
+++ b/src/components/DeadlineCountdown.tsx
@@ -50,7 +50,7 @@ export function DeadlineCountdown({ lastPlotTime, hideLabel }: { lastPlotTime: s
 
   return (
     <div className="text-xs">
-      <span className="text-muted">Deadline:</span>{" "}
+      {!hideLabel && <><span className="text-muted">Deadline:</span>{" "}</>}
       <span className="text-accent font-medium">{formatted}</span>
     </div>
   );