fix: give the Overview traffic chart a full-width row

CHANGELOG.md

@@ -8,10 +8,12 @@ Write each change in both `### English` and `### 中文` under `## Unreleased`.
 ### English
 
 - Make the Overview traffic chart taller so the area/line plot is readable
+- Give the Overview traffic chart a full-width row so the series can use the console width
 
 ### 中文
 
 - 加高概览流量图，面积折线更容易看清
+- 概览流量图单独占一行，折线铺满控制台宽度
 
 ## 0.2.18 - 2026-08-29
 

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 = 720
+const WIDTH = 960
 const HEIGHT = 280
-const PAD = { top: 16, right: 12, bottom: 28, left: 40 }
+const PAD = { top: 16, right: 16, bottom: 28, left: 40 }
 
 function hourLabel(value: string, daily: boolean, lang: 'en' | 'zh') {
   const date = new Date(value)
@@ -137,7 +137,7 @@ export function TrafficChart({
     <div ref={rootRef} className="min-w-0">
       <svg
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-        className="h-72 w-full overflow-visible"
+        className="block aspect-[960/280] w-full overflow-visible"
         role="img"
         aria-label={emptyLabel}
         onMouseLeave={() => setActive(null)}

frontend/src/components/ui/PageSkeletons.tsx

@@ -9,8 +9,9 @@ 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-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>
+      <section className="grid gap-5"><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></section>
+      <section className="grid gap-5 xl:grid-cols-2">{Array.from({ length: 2 }, (_, index) => <div key={index} 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 }, (_, item) => <SkeletonBlock key={item} className="h-8 w-full" />)}</div></div>)}</section>
+      <section className="grid gap-5 xl:grid-cols-2 2xl:grid-cols-3">{Array.from({ length: 3 }, (_, 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>
   )
 }

frontend/src/pages/OverviewPage.tsx

@@ -186,7 +186,7 @@ export function OverviewPage() {
         ))}
       </section>
 
-      <section className="grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,.75fr)]">
+      <section className="grid gap-5">
         <Card data-gsap-reveal className="app-panel-flat overflow-hidden rounded-lg p-0">
           <div className="flex items-center justify-between gap-3 border-b border-[var(--app-line)] px-5 py-4">
             <div>
@@ -224,7 +224,9 @@ export function OverviewPage() {
             </div>
           </div>
         </Card>
+      </section>
 
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,.85fr)]">
         <Card data-gsap-reveal className="app-panel-flat overflow-hidden rounded-lg p-0">
           <div className="flex items-center justify-between gap-3 border-b border-[var(--app-line)] px-5 py-4">
             <div>
@@ -305,9 +307,7 @@ export function OverviewPage() {
             </span>
           </div>
         </Card>
-      </section>
 
-      <section className="grid gap-5 xl:grid-cols-2 2xl:grid-cols-[minmax(0,1.05fr)_minmax(0,.85fr)_minmax(0,.85fr)_minmax(280px,.75fr)]">
         <Card data-gsap-reveal className="app-panel-flat overflow-hidden rounded-lg p-0">
           <div className="flex items-center justify-between gap-3 border-b border-[var(--app-line)] px-5 py-4">
             <div>
@@ -327,7 +327,9 @@ export function OverviewPage() {
             }))}
           />
         </Card>
+      </section>
 
+      <section className="grid gap-5 xl:grid-cols-2 2xl:grid-cols-3">
         <Card data-gsap-reveal className="app-panel-flat overflow-hidden rounded-lg p-0">
           <div className="flex items-center justify-between gap-3 border-b border-[var(--app-line)] px-5 py-4">
             <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-D0zQGztl.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dh4GNv7V.css">
+    <script type="module" crossorigin src="/assets/index-BLu1oRxf.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DaLLqKNi.css">
   </head>
   <body>
     <div id="root"></div>