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

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
+4 -3
View File
@@ -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";
+1 -1
View File
@@ -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 =