Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-05-06 05:48:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust margin and layout for PeriodSelector and avg packet loss display in NetworkChartClient

Browse Source
This commit is contained in:
hamster1963
2026-01-30 11:48:58 +08:00
parent 18e3c74178
commit a303a5add2
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NetworkChart.tsx
+4 -3
View File
@@ -334,8 +334,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
↑{stats.maxDelay.toFixed(0)} ↑{stats.maxDelay.toFixed(0)}
</span> </span>
{avgPacketLoss !== null && ( {avgPacketLoss !== null && (
<span className="text-muted-foreground"> <span className="text-muted-foreground flex items-center gap-1">
{avgPacketLoss.toFixed(2)}% avg loss {avgPacketLoss.toFixed(2)}%
<p className=" hidden sm:block">avg loss</p>
</span> </span>
)} )}
</div> </div>
@@ -531,7 +532,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
return ( return (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-center gap-3 -mt-5 flex-wrap"> <div className="flex items-center gap-3 sm:-mt-5 -mt-3 flex-wrap">
<div className="flex items-center gap-1 rounded-full bg-muted dark:bg-muted/40 p-0.5 border border-border/60 dark:border-border"> <div className="flex items-center gap-1 rounded-full bg-muted dark:bg-muted/40 p-0.5 border border-border/60 dark:border-border">
{TIME_RANGE_OPTIONS.map((option) => { {TIME_RANGE_OPTIONS.map((option) => {
const isLocked = !isLogin && option.value !== "1d"; const isLocked = !isLogin && option.value !== "1d";
src/components/ServerDetailChart.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ function PeriodSelector({
]; ];
return ( return (
<div className="flex gap-0.5 mb-3 flex-wrap -mt-5 p-0.5 bg-muted dark:bg-muted/40 rounded-full w-fit border border-border/60 dark:border-border"> <div className="flex gap-0.5 mb-3 flex-wrap sm:-mt-5 -mt-3 p-0.5 bg-muted dark:bg-muted/40 rounded-full w-fit border border-border/60 dark:border-border">
{periods.map((period) => { {periods.map((period) => {
// Only realtime and 1d are available for non-logged-in users // Only realtime and 1d are available for non-logged-in users
const isLocked = const isLocked =