💄 修复日志页统计条窄屏文字重叠

[RenjiYuusei]

Checklist / 检查清单

• Fixes mentioned issues / 修复已提及的问题
• Code reviewed by human / 代码通过人工检查
• Changes tested / 已完成测试

背景

用户在移动端（越南语界面）反馈：日志页「范围 / 统计条」里的 Tổng 0，Đã lọc 0（总计 / 已筛选）与右侧
Tự động xóa nhật ký cũ hơn …（自动清理超过 N 天的日志）挤在一起、文字互相压字，完全看不清。

已在真实构建（dist/ext + Playwright）中复现，且与语言无关——英文界面在 400px 宽下同样重叠：

[verify] BEFORE counts={"x":80.90625,"y":309.65625,"width":102.546875,"height":16}
                 clean={"x":125.84375,"y":309.65625,"width":167.09375,"height":16}
[verify] BEFORE overlapX=57.609375 overlapY=16 overlapping=true

根因：该条是单行 flex items-center justify-between。左侧分组带 min-w-0 会被压缩，但其中的计数 span
是 shrink-0；分组被压到比内容更窄后，计数文字溢出自身盒子并直接画到右侧「自动清理」分组上——是溢出，
不是换行或截断，所以两段文字重叠。

本次改动

src/pages/options/routes/Logger/index.tsx 统计条：

• 窄屏改为竖向堆叠（flex-col + md:flex-row md:items-center md:justify-between），
  桌面端（≥768px）保持原来的单行左右分布。
• 两个分组加 w-full md:w-auto，窄屏下各自独占整行，长时间范围文本才能在行内 truncate 而不是溢出压字。
• 「自动清理」分组窄屏允许 flex-wrap（md:flex-nowrap md:shrink-0），超窄屏（≤360px）时换行而不是横向溢出。
• 「当前 / 实时」两个徽标补 shrink-0 whitespace-nowrap，不再被挤成「Hiện / tại」两行折字。
• 统计分隔符由全角 ， 改为 ·，与顶栏同款写法，在非中文语言下更易读。

建议审查重点

• 桌面端（≥768px）统计条应与改动前完全一致：单行、左统计右「自动清理」。
• 窄屏两行的间距/高度（py-1.5 + gap-1，min-h-[34px] 保留）是否符合设计规范预期。
• 徽标改为 shrink-0 后，超窄屏由时间范围文本吸收压缩（truncate），已验证 360px 下无溢出。

验证

pnpm run build                                          → Rspack compiled with 4 warnings（既有警告，非本次引入）
pnpm exec vitest run src/pages/options/routes/Logger/   → 5 files / 59 tests passed
pnpm run lint                                           → prettier / tsc / check:i18n / check:issue-templates 全绿
pnpm exec eslint src/pages/options/routes/Logger        → 通过（无输出）

新增单元用例「移动端范围/统计条竖向堆叠，统计与自动清理各自独占整行」按 TDD 先跑失败
（getByTestId("logger-stats-bar") 找不到元素），实现后转绿。

真实扩展 + Playwright 一次性验证脚本（e2e/scratch/，未提交）在 vi-VN 与默认英文下各测 400 / 360 / 1280 宽，
另测深色主题，测量两分组包围盒：

[verify] vi-mobile-400   summary={"x":16,"y":303,"width":368} clean={"x":16,"y":325.65625,"width":368}
[verify] vi-mobile-400   overlapping = false   rightmost=384  viewport=400
[verify] vi-mobile-360   overlapping = false   rightmost=344  viewport=360
[verify] vi-mobile-400-dark overlapping = false
[verify] vi-desktop-1280 summary={"x":216,"width":479.75} clean={"x":1005.84375,"width":258.15625}
[verify] vi-desktop-1280 overlapping = false   rightmost=1264 viewport=1280
[verify] mobile-400 / mobile-360 / desktop-1280 overlapping = false

即：修复前 X 轴重叠 57.6px，修复后所有测试宽度与两种主题下均 overlapping = false，且内容不超出视口宽度；
桌面端仍为单行左右分布。

Screenshots / 截图

窄屏（400px，vi-VN）截图证据（本地 test-results/verify/logger-stats-bar/，按仓库规范不提交）：

• 修复前：Tổng 0，Đã lọc 0 与 Tự động xóa nhật ký cũ hơn 叠印在同一行，「Hiện tại」徽标被挤成两行。
• 修复后（浅色 / 深色）：第一行 2026-07-25 18:56:40 → 2026… Hiện tại · Tổng 8 · Đã lọc 8，
  第二行 Tự động xóa nhật ký cũ hơn [7] Ngày，两行清晰分离，徽标单行显示。
• 桌面 1280px：与改动前一致的单行左右分布。

[RenjiYuusei]

Đã chuyển commit này sang nhánh của #1 (claude/mobile-viewport-1555-3a9b0a21bb688020941d00a98cc7b572) vì cùng thuộc mảng sửa giao diện màn hình hẹp, nên đóng PR này để chỉ còn một PR duy nhất gửi lên repo gốc.