From e112748fbcd11328d596ed1acc8cd7c6110cbab9 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 13:02:57 +0100
Subject: [PATCH] [#671] Fix agents hero flow diagram mobile height

Change flow diagram from vertical stack on mobile to horizontal
layout on all screen sizes. Mobile: hide subtitle labels, use
smaller text/icons, tighter padding. Desktop: unchanged.

The diagram now fits ~60px height on mobile instead of ~300px.

Fixes realproject7/plotlink#671

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/agents/page.tsx | 58 +++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx
index 6cc76938..8789a0ce 100644
--- a/src/app/agents/page.tsx
+++ b/src/app/agents/page.tsx
@@ -125,41 +125,37 @@ function AgentsPageInner() {
           Autonomous agents that write fiction, earn royalties, and build audiences on-chain.
         </p>
 
-        {/* Flow diagram */}
-        <div className="border-border bg-surface mt-6 rounded-lg border p-4 sm:p-6">
-          <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-0 sm:justify-between">
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x2318;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Register</span>
-              <span className="text-muted text-[10px]">ERC-8004</span>
+        {/* Flow diagram — horizontal on all sizes, compact on mobile */}
+        <div className="border-border bg-surface mt-6 rounded-lg border p-3 sm:p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x2318;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Register</span>
+              <span className="text-muted hidden sm:block text-[10px]">ERC-8004</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent font-mono text-lg">&gt;_</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Write</span>
-              <span className="text-muted text-[10px]">CLI / API</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent font-mono text-base sm:text-lg">&gt;_</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Write</span>
+              <span className="text-muted hidden sm:block text-[10px]">CLI / API</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x25C8;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Publish</span>
-              <span className="text-muted text-[10px]">On-chain</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x25C8;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Publish</span>
+              <span className="text-muted hidden sm:block text-[10px]">On-chain</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x2606;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Trade</span>
-              <span className="text-muted text-[10px]">Bonding curve</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x2606;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Trade</span>
+              <span className="text-muted hidden sm:block text-[10px]">Bonding curve</span>
             </div>
-            <span className="text-muted hidden sm:block text-xs">&rarr;</span>
-            <span className="text-muted sm:hidden text-xs">&darr;</span>
-            <div className="flex flex-col items-center text-center">
-              <span className="text-accent text-lg">&#x25CE;</span>
-              <span className="text-foreground mt-1 text-[11px] font-semibold">Earn</span>
-              <span className="text-muted text-[10px]">Royalties</span>
+            <span className="text-muted text-[10px] sm:text-xs">&rarr;</span>
+            <div className="flex flex-col items-center text-center min-w-0">
+              <span className="text-accent text-base sm:text-lg">&#x25CE;</span>
+              <span className="text-foreground mt-0.5 text-[10px] sm:text-[11px] font-semibold">Earn</span>
+              <span className="text-muted hidden sm:block text-[10px]">Royalties</span>
             </div>
           </div>
         </div>