fix: make the Overview traffic chart taller

CHANGELOG.md

@@ -7,8 +7,12 @@ Write each change in both `### English` and `### 中文` under `## Unreleased`.
 
 ### English
 
+- Make the Overview traffic chart taller so the area/line plot is readable
+
 ### 中文
 
+- 加高概览流量图，面积折线更容易看清
+
 ## 0.2.18 - 2026-08-29
 
 ### English

frontend/src/components/overview/TrafficChart.tsx

@@ -3,9 +3,9 @@ import gsap from 'gsap'
 import type { RequestStatsPoint } from '@/api/logs'
 import { formatCompact } from '@/lib/format'
 
-const WIDTH = 640
-const HEIGHT = 168
-const PAD = { top: 12, right: 8, bottom: 24, left: 36 }
+const WIDTH = 720
+const HEIGHT = 280
+const PAD = { top: 16, right: 12, bottom: 28, left: 40 }
 
 function hourLabel(value: string, daily: boolean, lang: 'en' | 'zh') {
   const date = new Date(value)
@@ -123,7 +123,7 @@ export function TrafficChart({
 
   if (!series.length || !hasTraffic) {
     return (
-      <div className="grid min-h-40 place-items-center rounded-lg border border-dashed border-[var(--app-line-strong)] px-4 text-sm text-[var(--app-faint)]">
+      <div className="grid min-h-72 place-items-center rounded-lg border border-dashed border-[var(--app-line-strong)] px-4 text-sm text-[var(--app-faint)]">
         {emptyLabel}
       </div>
     )
@@ -137,7 +137,7 @@ export function TrafficChart({
     <div ref={rootRef} className="min-w-0">
       <svg
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-        className="h-40 w-full overflow-visible"
+        className="h-72 w-full overflow-visible"
         role="img"
         aria-label={emptyLabel}
         onMouseLeave={() => setActive(null)}

frontend/src/components/ui/PageSkeletons.tsx

@@ -9,7 +9,7 @@ export function OverviewPageSkeleton() {
     <div className="space-y-6" aria-label="Loading overview">
       <section className="flex items-end justify-between gap-4 border-b border-[var(--app-line)] pb-4"><div className="space-y-3"><SkeletonBlock className="h-8 w-40" /><SkeletonBlock className="h-4 w-80 max-w-[70vw]" /></div><div className="hidden space-y-2 sm:block"><SkeletonBlock className="ml-auto h-8 w-40" /><SkeletonBlock className="ml-auto h-4 w-20" /></div></section>
       <section className="grid overflow-hidden rounded-lg border border-[var(--app-line)] bg-[var(--app-surface)] sm:grid-cols-2 xl:grid-cols-4">{Array.from({ length: 4 }, (_, index) => <div key={index} className="min-h-32 space-y-5 border-[var(--app-line)] p-5 first:border-0 sm:border-l sm:first:border-0"><SkeletonBlock className="h-4 w-24" /><SkeletonBlock className="h-8 w-28" /><SkeletonBlock className="h-3 w-36" /></div>)}</section>
-      <section className="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,.75fr)]"><div className="app-panel-flat overflow-hidden rounded-lg p-5"><SkeletonBlock className="h-5 w-24" /><SkeletonBlock className="mt-2 h-3 w-48" /><SkeletonBlock className="mt-6 h-36 w-full" /><div className="mt-5 grid grid-cols-4 gap-3">{Array.from({ length: 4 }, (_, index) => <SkeletonBlock key={index} className="h-10 w-full" />)}</div></div><div className="app-panel-flat overflow-hidden rounded-lg p-5"><SkeletonBlock className="h-5 w-28" /><SkeletonBlock className="mt-2 h-3 w-40" /><div className="mt-6 space-y-4">{Array.from({ length: 5 }, (_, index) => <SkeletonBlock key={index} className="h-8 w-full" />)}</div></div></section>
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,.75fr)]"><div className="app-panel-flat overflow-hidden rounded-lg p-5"><SkeletonBlock className="h-5 w-24" /><SkeletonBlock className="mt-2 h-3 w-48" /><SkeletonBlock className="mt-6 h-72 w-full" /><div className="mt-5 grid grid-cols-4 gap-3">{Array.from({ length: 4 }, (_, index) => <SkeletonBlock key={index} className="h-10 w-full" />)}</div></div><div className="app-panel-flat overflow-hidden rounded-lg p-5"><SkeletonBlock className="h-5 w-28" /><SkeletonBlock className="mt-2 h-3 w-40" /><div className="mt-6 space-y-4">{Array.from({ length: 5 }, (_, index) => <SkeletonBlock key={index} className="h-8 w-full" />)}</div></div></section>
       <section className="grid gap-5 xl:grid-cols-2 2xl:grid-cols-4">{Array.from({ length: 4 }, (_, index) => <div key={index} className="app-panel-flat overflow-hidden rounded-lg p-5"><SkeletonBlock className="h-5 w-28" /><div className="mt-6 space-y-4">{Array.from({ length: 4 }, (_, item) => <SkeletonBlock key={item} className="h-8 w-full" />)}</div></div>)}</section>
     </div>
   )

internal/webui/static/index.html

@@ -22,8 +22,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-BW20kHE0.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-D6oYhPff.css">
+    <script type="module" crossorigin src="/assets/index-D0zQGztl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dh4GNv7V.css">
   </head>
   <body>
     <div id="root"></div>