DiogoVieira14/lr-openwrt-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed responsiveness

Browse Source
This commit is contained in:
litoral05
2026-05-12 11:59:54 +01:00
parent 7c04ea5b2e
commit 17364e23d3
12 changed files with 1240 additions and 1166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/NetworkTrafficChart.tsx
+11 -11
View File
@@ -104,7 +104,7 @@ export function NetworkTrafficChart({
points[points.length - 1];
return (
<Card className="relative h-full overflow-hidden">
<Card className="relative h-full min-h-[240px] overflow-hidden">
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-blue-400/30 to-transparent" />
<div className="mb-4 flex items-start justify-between gap-4">
@@ -131,22 +131,22 @@ export function NetworkTrafficChart({
{compact && latestPoint && (
<div className="mb-3 grid grid-cols-2 gap-2">
<div className="rounded-xl border border-white/10 bg-white/[0.025] p-3">
<div className="min-w-0 rounded-xl border border-white/10 bg-white/[0.025] p-3">
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
Entrada
</p>
<p className="mt-1 font-mono text-sm font-bold text-green-300">
<p className="mt-1 truncate font-mono text-sm font-bold text-green-300">
{latestPoint.downloadMbps.toFixed(3)} Mbps
</p>
</div>
<div className="rounded-xl border border-white/10 bg-white/[0.025] p-3">
<div className="min-w-0 rounded-xl border border-white/10 bg-white/[0.025] p-3">
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
Saída
</p>
<p className="mt-1 font-mono text-sm font-bold text-blue-300">
<p className="mt-1 truncate font-mono text-sm font-bold text-blue-300">
{latestPoint.uploadMbps.toFixed(3)} Mbps
</p>
</div>
@@ -156,8 +156,8 @@ export function NetworkTrafficChart({
<div
className={
compact
? 'h-[calc(100%-8.5rem)] min-h-[140px]'
: 'h-[calc(100%-4.5rem)] min-h-[360px]'
? 'h-[calc(100%-8.5rem)] min-h-[130px]'
: 'h-[calc(100%-4.5rem)] min-h-[320px]'
}
>
<ResponsiveContainer
@@ -171,13 +171,13 @@ export function NetworkTrafficChart({
? {
top: 8,
right: 8,
left: -28,
left: -30,
bottom: 0,
}
: {
top: 8,
right: 16,
left: 0,
left: -8,
bottom: 0,
}
}
@@ -191,14 +191,14 @@ export function NetworkTrafficChart({
dataKey="time"
stroke="#94a3b8"
fontSize={compact ? 10 : 12}
minTickGap={compact ? 32 : 24}
minTickGap={compact ? 36 : 24}
tick={compact ? false : undefined}
/>
<YAxis
stroke="#94a3b8"
fontSize={compact ? 10 : 12}
width={compact ? 42 : 60}
width={compact ? 42 : 56}
tickFormatter={(value) =>
`${value} Mbps`
}