From 818557f57d486a47c2965d4f3dfc0eb385ead7ad Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Thu, 19 Mar 2026 08:20:38 +0300
Subject: [PATCH] fix: improve graph spacing, mobile layout, and Telegram
 viewport

- Increase FA2 scalingRatio to 10 and decrease gravity to 0.5 for
  better node spacing (less cluttered graph)
- Use 100dvh instead of 100vh for Telegram Mini App viewport compat
- Hide legend on mobile to prevent overlay collision
- Move controls to bottom-right on mobile, bottom-center on desktop
- Make stats single-column on mobile for compact layout
---
 src/pages/ReferralNetwork/ReferralNetwork.tsx         | 10 +++++-----
 src/pages/ReferralNetwork/components/NetworkGraph.tsx |  5 +++--
 src/pages/ReferralNetwork/components/NetworkStats.tsx |  4 ++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/pages/ReferralNetwork/ReferralNetwork.tsx b/src/pages/ReferralNetwork/ReferralNetwork.tsx
index 4356e38..e5b3b2a 100644
--- a/src/pages/ReferralNetwork/ReferralNetwork.tsx
+++ b/src/pages/ReferralNetwork/ReferralNetwork.tsx
@@ -31,7 +31,7 @@ export function ReferralNetwork() {
   return (
     <div
       id="referral-network-container"
-      className="relative flex h-[calc(100vh-64px)] flex-col overflow-hidden bg-[#0a0a0f]"
+      className="relative flex h-[calc(100dvh-64px)] flex-col overflow-hidden bg-[#0a0a0f]"
     >
       {/* Top bar */}
       <div className="relative z-20 flex shrink-0 items-center gap-3 border-b border-dark-700/50 bg-dark-900/90 px-4 py-3 backdrop-blur-md">
@@ -86,13 +86,13 @@ export function ReferralNetwork() {
               <NetworkStats data={networkData} />
             </div>
 
-            {/* Bottom-right: legend */}
-            <div className="absolute bottom-4 right-4 z-10">
+            {/* Bottom-right: legend (hidden on mobile to avoid overlap) */}
+            <div className="absolute bottom-4 right-4 z-10 hidden sm:block">
               <NetworkLegend />
             </div>
 
-            {/* Bottom-center: controls */}
-            <div className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2">
+            {/* Bottom-right on mobile, bottom-center on desktop: controls */}
+            <div className="absolute bottom-4 right-4 z-10 sm:left-1/2 sm:right-auto sm:-translate-x-1/2">
               <NetworkControls />
             </div>
           </>
diff --git a/src/pages/ReferralNetwork/components/NetworkGraph.tsx b/src/pages/ReferralNetwork/components/NetworkGraph.tsx
index 5fa5bfe..f00bb0f 100644
--- a/src/pages/ReferralNetwork/components/NetworkGraph.tsx
+++ b/src/pages/ReferralNetwork/components/NetworkGraph.tsx
@@ -236,9 +236,10 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
     if (graph.order > 0) {
       const supervisor = new FA2LayoutSupervisor(graph, {
         settings: {
-          gravity: 1,
-          scalingRatio: 2,
+          gravity: 0.5,
+          scalingRatio: 10,
           barnesHutOptimize: true,
+          slowDown: 2,
         },
       });
       fa2Ref.current = supervisor;
diff --git a/src/pages/ReferralNetwork/components/NetworkStats.tsx b/src/pages/ReferralNetwork/components/NetworkStats.tsx
index a7303e0..e715bd2 100644
--- a/src/pages/ReferralNetwork/components/NetworkStats.tsx
+++ b/src/pages/ReferralNetwork/components/NetworkStats.tsx
@@ -31,9 +31,9 @@ export function NetworkStats({ data, className }: NetworkStatsProps) {
 
   return (
     <div
-      className={`rounded-xl border border-dark-700/50 bg-dark-900/80 p-3 backdrop-blur-md ${className ?? ''}`}
+      className={`rounded-xl border border-dark-700/50 bg-dark-900/80 p-2 backdrop-blur-md sm:p-3 ${className ?? ''}`}
     >
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 sm:gap-3">
         {stats.map((stat) => (
           <div key={stat.label}>
             <p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">