From 9280eb515c93e257f1db6a948aa6e0667b5a9c00 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 24 Mar 2026 20:29:17 +0000
Subject: [PATCH 1/2] [#512] Fix profile activity feed layout on mobile

Stack FeedRow into two rows on mobile (title on row 1, detail + date
on row 2) to prevent text overflow, title truncation, and "PLOT"
merging with dates. Stays horizontal on sm+ screens.

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

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index 14676210..bc371c37 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1079,7 +1079,8 @@ const EVENT_COLORS: Record<FeedEntry["type"], string> = {
 
 function FeedRow({ entry }: { entry: FeedEntry }) {
   return (
-    <div className="border-border flex items-center justify-between rounded border px-3 py-2 text-xs">
+    <div className="border-border flex flex-col gap-1 rounded border px-3 py-2 text-xs sm:flex-row sm:items-center sm:justify-between sm:gap-2">
+      {/* Row 1 (mobile) / Left (desktop): event type + story title */}
       <div className="flex items-center gap-2 min-w-0">
         <span className={`font-medium shrink-0 w-16 ${EVENT_COLORS[entry.type]}`}>
           {EVENT_LABELS[entry.type]}
@@ -1094,12 +1095,13 @@ function FeedRow({ entry }: { entry: FeedEntry }) {
         ) : (
           <span className="text-foreground truncate">Royalties</span>
         )}
+      </div>
+      {/* Row 2 (mobile) / Right (desktop): detail + date + tx link */}
+      <div className="flex shrink-0 items-center gap-2 pl-18 sm:pl-0">
         {entry.detail && (
-          <span className="text-muted shrink-0">{entry.detail}</span>
+          <span className="text-muted whitespace-nowrap">{entry.detail}</span>
         )}
-      </div>
-      <div className="flex shrink-0 items-center gap-1.5 ml-2">
-        <time dateTime={entry.timestamp} className="text-muted text-[10px]">
+        <time dateTime={entry.timestamp} className="text-muted whitespace-nowrap text-[10px]">
           {new Date(entry.timestamp).toLocaleDateString("en-US", {
             month: "short",
             day: "numeric",

From c221cb5a347962914535c217da21ca6346f31fe8 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 24 Mar 2026 20:31:16 +0000
Subject: [PATCH 2/2] [#512] Allow feed row 2 to wrap on mobile for large
 amounts

Remove shrink-0 and whitespace-nowrap from the detail/date row so
large values like "1089000.00 tokens for 2178.00 PLOT" can wrap
instead of overflowing on narrow screens.

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

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index bc371c37..ee6dd4f3 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -1097,9 +1097,9 @@ function FeedRow({ entry }: { entry: FeedEntry }) {
         )}
       </div>
       {/* Row 2 (mobile) / Right (desktop): detail + date + tx link */}
-      <div className="flex shrink-0 items-center gap-2 pl-18 sm:pl-0">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 pl-18 sm:shrink-0 sm:pl-0">
         {entry.detail && (
-          <span className="text-muted whitespace-nowrap">{entry.detail}</span>
+          <span className="text-muted">{entry.detail}</span>
         )}
         <time dateTime={entry.timestamp} className="text-muted whitespace-nowrap text-[10px]">
           {new Date(entry.timestamp).toLocaleDateString("en-US", {