From 7b3b56dbfb344bfbb11bf9622641262a6e6540c2 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 3 Apr 2026 11:21:10 +0100
Subject: [PATCH] [#798] Add min-w-0 overflow guard on stats grid children

Wrap MCap and Supply grid children in min-w-0 divs to prevent
text overflow on narrow screens (320px) where large USD values
or 24h% badges could break the grid layout.

Fixes #798

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

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index e8e3f733..1feb325a 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -341,12 +341,14 @@ function StoryHeader({
         <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">
             <div className="grid grid-cols-2 gap-2">
-              <MarketCapBox
-                tokenAddress={storyline.token_address}
-                totalSupply={parseFloat(priceInfo.totalSupply)}
-                pricePerToken={parseFloat(priceInfo.pricePerToken)}
-              />
-              <div>
+              <div className="min-w-0">
+                <MarketCapBox
+                  tokenAddress={storyline.token_address}
+                  totalSupply={parseFloat(priceInfo.totalSupply)}
+                  pricePerToken={parseFloat(priceInfo.pricePerToken)}
+                />
+              </div>
+              <div className="min-w-0">
                 <span className="text-muted block text-[10px] uppercase tracking-wider">
                   Supply Minted
                 </span>