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

Author: hamster1963

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";

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 =