From 8483af120db0ee22167b709ee33abcb25bfe4a73 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 18:11:49 +0100
Subject: [PATCH] [#818] Move stats + CTA inside flex-1 column next to cover

Move stats grid and AddPlotButton back inside the min-w-0 flex-1
info column div. Flexbox naturally places them next to the cover
on both mobile and desktop. Remove sm:pl-[176px] hack.

Fixes #818

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index ddf81aec..a21ce284 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -325,13 +325,10 @@ function StoryHeader({
               </span>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/* 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">
+          {/* Stats grid — inside right column, next to cover */}
+          {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}
@@ -375,13 +372,12 @@ function StoryHeader({
                 <div className="text-foreground text-sm font-bold">{createdDate ?? "—"}</div>
                 <div className="text-muted text-[9px]">Created</div>
               </div>
-          </div>
-        </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} />
+          {/* CTA — in right column */}
+          <AddPlotButton storylineId={storyline.storyline_id} writerAddress={storyline.writer_address} lastPlotTime={storyline.last_plot_time} sunset={storyline.sunset} hasDeadline={storyline.has_deadline} />
+        </div>
       </div>
     </header>
   );