fix(ui): dynamic viewBox so trend chart renders 1:1 on wide screens (rant 2026-08-24T14:29:57)

[argszero]

Summary

Fixes the root cause of the oversized fonts / thick lines on the "点数趋势" (points trend) chart (v0.7.16): the SVG was being uniformly scaled up ~2.4×. The viewBox was fixed at 0 0 640 85 while width:100% stretched the element to the full container width (1534px on wide screens); height:auto then scaled by the viewBox aspect ratio → canvasScale = 1534/640 = 2.397. So stroke-width:1.4px rendered ≈3.4px and 8px axis fonts rendered ≈19px — which is also why the fine-tuning in v0.7.15→v0.7.16 appeared to have "no effect" (the gains were swallowed by the 2.4× scaling).

Fix (JS + HTML only)

• ui/js/app.js: replaced the fixed viewBox geometry (W=640, H=85, PL=32, PR=8, PT=6, PB=14) with dynamic viewBox geometry — W is derived from the actual container width so that 1 viewBox unit ≈ 1 physical pixel on wide screens (scale = 1.000, real px).
• Added a debounced resize listener so the chart re-renders with the correct viewBox when the window resizes.
• Small screens still preserve today's downscale (scale < 1), aspect ratio is constant — no distortion or cropping.
• The hover tooltip handler already reads the viewBox attribute, so it stays accurate.

Verified: wide screen scale = 1.000 (real px); small screens keep the previous downscale behavior; aspect ratio unchanged. Existing features preserved: gradient area, smooth curve, metric switching, hover tooltip.

Tests

• node --check ui/js/app.js — OK
• cargo test — 146/146 passed (JS-only change, Rust gate green)
• cache-bust bumped 20260824-11 → 20260824-12

Related rant

Host rant 2026-08-24T14:29:57.028007 (verbatim):

交易记录页"点数趋势"图（v0.7.16）字大线粗的真正根因（vision 模型实测 + CDP 渲染探测）：SVG 整体被等比放大约 2.4 倍。

【实测数据】

• .tx-trend svg viewBox = 0 0 640 85，但实际渲染尺寸 = 1534 × 203.7px（CSS width:100% 撑满 1534px 容器，height:auto 按 viewBox 比例算出 203.7）
• canvasScale = 渲染宽 / viewBox 宽 = 1534 / 640 = 2.397
• 因此：折线 CSS stroke-width=1.4px 实际视觉 ≈ 1.4 × 2.4 ≈ 3.4px（粗）；坐标轴字号 8px 实际 ≈ 8 × 2.4 ≈ 19px（大）——这解释了为什么 v0.7.15→v0.7.16 把参数调细后"看起来没变化"（增量被 2.4 倍放大吞掉）
• SVG 无 preserveAspectRatio（默认 xMidYMid meet，但 width/height 独立指定且等比 → 实际是等比放大适配宽容器）

【期望修复方向】让 SVG 内元素不再被 2.4 倍放大：

1. 首选：viewBox 宽度改为接近实际渲染宽度（如 0 0 1534 85 或按容器动态设置 viewBox），使 1 viewBox 单位 ≈ 1 物理像素，线宽/字号按 CSS 值真实呈现；或
2. 将容器最大宽度限制到与 viewBox 匹配（如 max-width 与 640/85 比例对应），避免拉大；或
3. 在 JS 里按实际容器宽度计算 viewBox（resize 时更新），保证恒等比 1:1
   修复后应满足：折线视觉 ≈ 1.4px、坐标轴文字 ≈ 8px、标题 11px、图例 10px，整体精致；保留渐变面积、平滑曲线、指标切换、悬停 tooltip。请在宽屏（1534px+）与普通屏都验证，避免引入新的变形/裁切。