mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
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
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user