fix(layout): 表格流式列宽,任何内容与视口都不再需要横向滚动

硬要求(用户明确):不允许出现需要滚动才能看全的情况。

改动:
- 表格 table-layout: fixed + 百分比列宽(8/16/21/8/7/11/17/12%),
  表头允许换行并裁剪、单元格裁剪、心率图与可用率条随宽度伸缩
- 卡片网格 minmax(min(300px,100%),1fr) + .card{min-width:0}
  (修 grid 的 min-width:auto 撑破:320px 下曾溢出 495px)
- 截断的名称/目标补 title,悬停可看完整值
- 新增 scripts/verify-layout.cjs:自带极端配置(40 目标 / 6 分组 /
  超长名称与 URL)+ 临时静态服务,扫描 13 视口 × 2 视图,26 项断言零横向滚动

验证:五套 115 项全通过(17+30+26+20+22)
This commit is contained in:
tamakyi
2026-10-13 22:37:02 +08:00
parent a7408e2bb5
commit ea846dee31
13 changed files with 573 additions and 425 deletions
+1 -1
View File
@@ -56,7 +56,7 @@
<span id="ur-chip" class="footer-item warn-chip" hidden>UptimeRobot 同步异常</span>
<span id="updated-at" class="footer-item">–</span>
<span id="countdown" class="footer-item">–</span>
<span class="footer-item version">shiroko-monitor v0.9.0</span>
<span class="footer-item version">shiroko-monitor v0.9.1</span>
</footer>
<script type="module" src="assets/app.js"></script>