diff --git a/src/pages/AdminRemnawave.tsx b/src/pages/AdminRemnawave.tsx index 112a90d..dcd7eb4 100644 --- a/src/pages/AdminRemnawave.tsx +++ b/src/pages/AdminRemnawave.tsx @@ -325,62 +325,75 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar )} - {/* Live metrics: RAM · load · speeds · versions */} + {/* Live metrics in 3 fixed rows (processor · traffic · versions) so the + changing speed/value widths never reflow or jump between lines. */} {(ramPct !== null || loadAvg || rx > 0 || tx > 0 || node.versions) && ( -
- {ramPct !== null && ( - - - 85 - ? 'text-error-400' - : ramPct > 65 - ? 'text-warning-400' - : 'text-dark-400' - } - > - {ramPct}% - - - - - +
+ {/* Row 1 — Processor: CPU load + RAM */} + {(loadAvg || ramPct !== null) && ( +
+ {loadAvg && ( + + + {loadAvg} + + )} + {ramPct !== null && ( + + + 85 + ? 'text-error-400' + : ramPct > 65 + ? 'text-warning-400' + : 'text-dark-400' + } + > + {ramPct}% + + + + + + )} +
)} - {loadAvg && ( - - - {loadAvg} - + + {/* Row 2 — Traffic: down / up speeds (2 fixed columns so a wide value + never pushes the other) */} + {(rx > 0 || tx > 0) && ( +
+ + + {formatSpeed(rx)} + + + + {formatSpeed(tx)} + +
)} - - - - {formatSpeed(rx)} - - - - {formatSpeed(tx)} - - + + {/* Row 3 — Versions: remnanode + xray core */} {(node.versions?.node || node.versions?.xray) && ( - +
{node.versions?.node && ( - + {node.versions.node} )} {node.versions?.xray && ( - + {node.versions.xray} )} - +
)}
)}