etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(admin-remnawave): node metrics 3-rows on mobile, original single row on desktop

Browse Source 
Jumping only happened on mobile (the wrap reshuffled when speeds changed width); desktop fits on one line and never jumped. So keep the 3 fixed rows for mobile (sm:hidden) and restore the original single flex-wrap row for desktop (hidden sm:flex). On mobile, download/upload now sit tight in a flex row (gap-4) instead of a full-width 2-col grid that looked too spread out.
This commit is contained in:
c0mrade
2026-06-01 15:42:29 +03:00
parent 43acb70ab9
commit 97d436721a
1 changed files with 106 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/AdminRemnawave.tsx
View File

@@ -215,6 +215,15 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
const outbounds = realtime?.outbounds ?? [];
const hasBreakdown = inbounds.length + outbounds.length > 0;
const ramColorClass =
ramPct === null
? ''
: ramPct > 85
? 'text-error-400'
: ramPct > 65
? 'text-warning-400'
: 'text-dark-400';
return (
<div
className={`rounded-xl border border-dark-700 bg-dark-800/50 p-3.5 transition-colors hover:border-dark-600 ${
@@ -325,11 +334,12 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
)}
</div>
{/* Live metrics in 3 fixed rows (processor · traffic · versions) so the
changing speed/value widths never reflow or jump between lines. */}
{/* Live metrics — mobile: 3 fixed rows so wrapping speeds don't reflow;
desktop (sm+): the original single wrap row, wide enough not to jump. */}
{(ramPct !== null || loadAvg || rx > 0 || tx > 0 || node.versions) && (
<div className="mt-2 space-y-1 border-t border-dark-700/60 pt-2 font-mono text-[10.5px] tabular-nums text-dark-500">
{/* Row 1 — Processor: CPU load + RAM */}
<>
{/* Mobile: processor · traffic · versions */}
<div className="mt-2 space-y-1 border-t border-dark-700/60 pt-2 font-mono text-[10.5px] tabular-nums text-dark-500 sm:hidden">
{(loadAvg || ramPct !== null) && (
<div className="flex items-center gap-3">
{loadAvg && (
@@ -341,17 +351,7 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
{ramPct !== null && (
<span className="flex items-center gap-1.5" title="RAM">
<MemoryIcon className="h-3 w-3 shrink-0 text-dark-500" />
<span
className={
ramPct > 85
? 'text-error-400'
: ramPct > 65
? 'text-warning-400'
: 'text-dark-400'
}
>
{ramPct}%
</span>
<span className={ramColorClass}>{ramPct}%</span>
<span className="h-1 w-10 overflow-hidden rounded-full bg-dark-700">
<span
className="block h-full rounded-full bg-dark-400"
@@ -362,11 +362,8 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
)}
</div>
)}
{/* Row 2 — Traffic: down / up speeds (2 fixed columns so a wide value
never pushes the other) */}
{(rx > 0 || tx > 0) && (
<div className="grid grid-cols-2 gap-3">
<div className="flex items-center gap-4">
<span className="flex items-center gap-1">
<DownloadIcon className="h-3 w-3 shrink-0 text-success-400/70" />
{formatSpeed(rx)}
@@ -377,8 +374,6 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
</span>
</div>
)}
{/* Row 3 — Versions: remnanode + xray core */}
{(node.versions?.node || node.versions?.xray) && (
<div className="flex items-center gap-3 text-dark-600">
{node.versions?.node && (
@@ -396,6 +391,55 @@ function NodeCard({ node, providerName, realtime, onAction, isLoading }: NodeCar
</div>
)}
</div>
{/* Desktop: single wrap row (original) */}
<div className="mt-2 hidden flex-wrap items-center gap-x-3 gap-y-1 border-t border-dark-700/60 pt-2 font-mono text-[10.5px] tabular-nums text-dark-500 sm:flex">
{ramPct !== null && (
<span className="flex items-center gap-1.5" title="RAM">
<MemoryIcon className="h-3 w-3 text-dark-500" />
<span className={ramColorClass}>{ramPct}%</span>
<span className="h-1 w-10 overflow-hidden rounded-full bg-dark-700">
<span
className="block h-full rounded-full bg-dark-400"
style={{ width: `${ramPct}%` }}
/>
</span>
</span>
)}
{loadAvg && (
<span className="flex items-center gap-1" title="load average 1 / 5 / 15 min">
<CpuIcon className="h-3 w-3 text-dark-500" />
{loadAvg}
</span>
)}
<span className="flex items-center gap-2">
<span className="flex items-center gap-0.5">
<DownloadIcon className="h-3 w-3 text-success-400/70" />
{formatSpeed(rx)}
</span>
<span className="flex items-center gap-0.5">
<UploadIcon className="h-3 w-3 text-accent-400/70" />
{formatSpeed(tx)}
</span>
</span>
{(node.versions?.node || node.versions?.xray) && (
<span className="ml-auto flex items-center gap-2.5 text-dark-600">
{node.versions?.node && (
<span className="flex items-center gap-1" title="remnanode">
<RemnawaveIcon className="h-3 w-3" />
{node.versions.node}
</span>
)}
{node.versions?.xray && (
<span className="flex items-center gap-1" title="xray core">
<XrayIcon className="h-3 w-3" />
{node.versions.xray}
</span>
)}
</span>
)}
</div>
</>
)}
{/* Per-node traffic accordion (merged from the former Traffic tab) */}