From c380610f200c16a28fd2e12f7a721166c499a489 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 15:51:46 +0100
Subject: [PATCH] [#762] Fix Reader holdings card overflow on mobile

Switch holdings card layout from flex-row to flex-col sm:flex-row so
the Moleskine book stacks on top of the stat grid on mobile (375px),
giving the 4 stat boxes full width instead of being squeezed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index b7a71043..dfa10ae8 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1486,7 +1486,7 @@ function PortfolioTab({ address, isOwnProfile }: { address: string; isOwnProfile
         {holdings!.map((h) => (
         <div key={h.storyline.id} className="border-border rounded border text-xs">
           {/* Moleskine book (left) + Info (right) */}
-          <div className="flex flex-row items-center gap-4 px-4 py-3">
+          <div className="flex flex-col sm:flex-row items-center gap-4 px-4 py-3">
             <Link
               href={`/story/${h.storyline.storyline_id}`}
               className="moleskine-notebook group relative block shrink-0 w-[130px] sm:w-[180px]"