From 8a7a137719efa3479305b62ea834af7211a58a5f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 09:16:19 +0100
Subject: [PATCH] [#783] Put MCap and Deadline on same line on desktop

Move Deadline/Story Complete into the existing 2-col stats grid so
MCap+Supply sit in the left column and Deadline sits in the right
column on sm+ screens. Mobile stacks vertically as before.

Fixes #783

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index b64929e5..66af5db5 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -302,37 +302,39 @@ function StoryHeader({
       </div>
 
       {priceInfo && (
-        <div className="mt-4 space-y-2 text-xs">
+        <div className="mt-4 text-xs">
           <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)}
-              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="space-y-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>
+                <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>
+                <span className="text-muted block text-[10px] uppercase tracking-wider mb-1">
+                  Next Plot Publish Deadline
+                </span>
+                <DeadlineCountdown lastPlotTime={storyline.last_plot_time} hideLabel />
+              </div>
+            ) : null}
           </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} hideLabel />
-            </div>
-          ) : null}
         </div>
       )}
       {!storyline.sunset && (