From 62ee7e4223829703cb0b4e528d63e2846c32b117 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sun, 15 Mar 2026 11:23:19 +0000
Subject: [PATCH] [#106] Polish story page with reading-first layout

Reorganized to content-first: story plots in the main column, all
engagement widgets (price chart, trading, donations, ratings) in a
320px sidebar that stacks below on mobile. Widened max-w to 5xl for
the two-column grid.

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 855f554d..e6060da7 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -55,30 +55,41 @@ export default async function StoryPage({ params }: { params: Params }) {
     : null;
 
   return (
-    <div className="mx-auto max-w-2xl px-6 py-12">
+    <div className="mx-auto max-w-5xl px-6 py-10">
       <StoryHeader storyline={storyline} priceInfo={priceInfo} />
-      {sl.token_address && priceInfo && (
-        <PriceChart
-          tokenAddress={sl.token_address as Address}
-          totalSupplyRaw={priceInfo.totalSupplyRaw}
-          currentPriceRaw={priceInfo.priceRaw}
-        />
-      )}
-      {sl.token_address && (
-        <TradingWidget tokenAddress={sl.token_address as Address} />
-      )}
-      <DonateWidget storylineId={id} />
-      {sl.token_address && (
-        <RatingWidget storylineId={id} tokenAddress={sl.token_address} />
-      )}
-      <div className="mt-10 space-y-10">
-        {plots.map((plot) => (
-          <PlotEntry key={plot.id} plot={plot} />
-        ))}
+
+      <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[1fr_320px]">
+        {/* Story content — primary reading area */}
+        <main>
+          {plots.length > 0 ? (
+            <div className="space-y-10">
+              {plots.map((plot) => (
+                <PlotEntry key={plot.id} plot={plot} />
+              ))}
+            </div>
+          ) : (
+            <p className="text-muted text-sm">No plots yet.</p>
+          )}
+        </main>
+
+        {/* Sidebar — engagement widgets */}
+        <aside className="space-y-4">
+          {sl.token_address && priceInfo && (
+            <PriceChart
+              tokenAddress={sl.token_address as Address}
+              totalSupplyRaw={priceInfo.totalSupplyRaw}
+              currentPriceRaw={priceInfo.priceRaw}
+            />
+          )}
+          {sl.token_address && (
+            <TradingWidget tokenAddress={sl.token_address as Address} />
+          )}
+          <DonateWidget storylineId={id} />
+          {sl.token_address && (
+            <RatingWidget storylineId={id} tokenAddress={sl.token_address} />
+          )}
+        </aside>
       </div>
-      {plots.length === 0 && (
-        <p className="text-muted mt-10 text-sm">No plots yet.</p>
-      )}
     </div>
   );
 }