From a303a5add23761bfdb3ecaac3146ea7bb2206132 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 30 Jan 2026 11:48:58 +0800
Subject: [PATCH] fix: adjust margin and layout for PeriodSelector and avg
 packet loss display in NetworkChartClient

---
 src/components/NetworkChart.tsx      | 7 ++++---
 src/components/ServerDetailChart.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/NetworkChart.tsx b/src/components/NetworkChart.tsx
index 7eeee0f..f376d84 100644
--- a/src/components/NetworkChart.tsx
+++ b/src/components/NetworkChart.tsx
@@ -334,8 +334,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 									↑{stats.maxDelay.toFixed(0)}
 								</span>
 								{avgPacketLoss !== null && (
-									<span className="text-muted-foreground">
-										{avgPacketLoss.toFixed(2)}% avg loss
+									<span className="text-muted-foreground flex items-center gap-1">
+										{avgPacketLoss.toFixed(2)}%
+										<p className=" hidden sm:block">avg loss</p>
 									</span>
 								)}
 							</div>
@@ -531,7 +532,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
 	return (
 		<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">
 					{TIME_RANGE_OPTIONS.map((option) => {
 						const isLocked = !isLogin && option.value !== "1d";
diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
index ad42606..c44adc8 100644
--- a/src/components/ServerDetailChart.tsx
+++ b/src/components/ServerDetailChart.tsx
@@ -96,7 +96,7 @@ function PeriodSelector({
 	];
 
 	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) => {
 				// Only realtime and 1d are available for non-logged-in users
 				const isLocked =