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）

README.md

@@ -82,7 +82,8 @@ shiroko-monitor/
 │   ├── verify-views.cjs          # 视图渲染、切换持久化与数据源过滤
 │   ├── verify-security.cjs       # banner 探测 / 脱敏 / 私有分层 / 刷新限流
 │   ├── verify-uptimerobot.cjs    # UR 映射单测 / 兼容接口 / 失败路径 / 真实 Key 冒烟
-│   └── prepare-artwork.py        # 从 assets-src/ 原图生成透明素材（边界 + 封闭区域两步抠图）
+│   ├── prepare-artwork.py        # 从 assets-src/ 原图生成透明素材（边界 + 封闭区域两步抠图）
+│   └── verify-layout.cjs         # 布局回归：极端内容 × 13 视口 × 2 视图，断言零横向滚动
 ├── assets-src/                   # 插画原始素材（AI 生成的白底原图，供重新处理）
 ├── local.monitors.json           # 私有配置（不入库）：真实地址、API Key
 ├── edge/cloudflare/              # Cloudflare Workers 边缘探针
@@ -444,6 +445,15 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
 - [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」，tooltip 内含服务端更新节奏与快照生成时间
 - [x] `scripts/verify.cjs` 适配纯外部数据源部署（自动跳过不适用的探测类断言），并新增「倒计时对齐服务端」断言
 
+### v0.9.1 已实现
+
+- [x] **「任何情况下都不需要横向滚动」定为硬要求并落地**：表格改为**流式列宽**（`table-layout: fixed` + 百分比列宽），表头允许换行、单元格裁剪，心率图与可用率条随宽度伸缩；从结构上不可能撑出横向滚动
+- [x] 修复两个只有极端内容才暴露的撑破（普通数据下测不出来）：
+  - **卡片视图**在 <768px 曾溢出最多 495px —— grid 轨道 `minmax(300px, 1fr)` + 网格项默认 `min-width: auto`，被超长 URL 撑到 801px；改为 `minmax(min(300px, 100%), 1fr)` + `.card { min-width: 0 }`
+  - **表格**在 <768px 曾溢出 8~42px —— 表头 `white-space: nowrap` 在窄列里溢出；改为换行 + 裁剪
+- [x] 新增 `scripts/verify-layout.cjs`：自带极端配置（40 目标 / 6 分组 / 超长名称与 URL）+ 临时静态服务，扫描 **13 种视口 × 2 视图**，26 项断言零横向滚动
+- [x] 被截断的名称/目标补 `title`，鼠标悬停可看完整值
+
 ### v0.9.0 已实现
 
 **修复你反馈的两个问题**

edge/cloudflare/worker.js

@@ -11,7 +11,7 @@
 
 import { connect } from 'cloudflare:sockets';
 
-const VERSION = '0.9.0';
+const VERSION = '0.9.1';
 const HISTORY_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const USER_AGENT = 'shiroko-monitor/0.3 (lightweight uptime panel)';

prober/node/index.js

@@ -35,7 +35,7 @@ const CONCURRENCY = 8;
 const WRITE_DEBOUNCE_MS = 300;
 const DEFAULT_INTERVAL_SEC = 60;
 const PORT = Number(process.env.PORT || 8787);
-const VERSION = '0.9.0';
+const VERSION = '0.9.1';
 const UR_DEFAULT_POLL_SEC = 300;
 const UR_MIN_REFRESH_GAP_MS = 60000;
 

public/assets/app.js

@@ -1,4 +1,4 @@
-const VERSION = '0.9.0';
+const VERSION = '0.9.1';
 const HB_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const BROWSER_CONCURRENCY = 6;
@@ -285,7 +285,8 @@ function renderCard(m) {
 
   const head = document.createElement('div');
   head.className = 'card-head';
-  head.innerHTML = `<span class="dot"></span><h3>${escapeHtml(m.name)}</h3><span class="type-badge">${escapeHtml(typeLabel(m))}</span>`;
+  // 名称列在窄屏会被截断，title 保证鼠标悬停仍能看到完整名称
+  head.innerHTML = `<span class="dot"></span><h3 title="${escapeHtml(m.name)}">${escapeHtml(m.name)}</h3><span class="type-badge">${escapeHtml(typeLabel(m))}</span>`;
 
   const target = document.createElement('div');
   target.className = 'card-target';
@@ -466,10 +467,9 @@ function tableRow(m, hide) {
   const tr = document.createElement('tr');
   tr.dataset.status = s.cls;
   tr.dataset.id = m.id;
-  const targetCell = hide ? '' : `<td class="t-target" title="${escapeHtml(targetText(m))}">${escapeHtml(targetText(m))}</td>`;
-  tr.innerHTML =
+  const targetCell = hide ? '' : `<td class="t-target" title="${escapeHtml(targetText(m))}">${escapeHtml(targetText(m))}</td>`;  tr.innerHTML =
     `<td class="t-state"><span class="dot"></span>${s.label}</td>` +
-    `<td class="t-name">${escapeHtml(m.name)}<span class="type-badge">${escapeHtml(typeLabel(m))}</span></td>` +
+    `<td class="t-name" title="${escapeHtml(m.name)}">${escapeHtml(m.name)}<span class="type-badge">${escapeHtml(typeLabel(m))}</span></td>` +
     targetCell +
     `<td class="t-num">${st?.latency != null ? `${st.latency} ms` : '–'}</td>` +
     `<td class="t-num">${escapeHtml(resultText(st, m))}</td>` +

public/assets/style.css

@@ -199,7 +199,7 @@ body {
 /* ---------- 卡片网格 ---------- */
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
   gap: 14px;
   max-width: 1200px;
   margin: 0 auto;
@@ -218,6 +218,9 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  /* 网格项默认 min-width:auto，长 URL/名称会把卡片撑破容器 —— 显式允许收缩并裁剪 */
+  min-width: 0;
+  overflow: hidden;
   padding: 14px 16px;
   background: var(--surface);
   border: 1px solid var(--border);
@@ -358,18 +361,35 @@ body[data-view="table"] .grid { display: block; }
   box-shadow: var(--shadow);
 }
 
-.monitor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.monitor-table {
+  width: 100%;
+  /* 列宽按百分比分配 + 固定表格算法：表格永远恰好铺满容器宽度，不会撑出横向滚动 */
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+/* 列宽：状态 / 服务 / 目标 / 延迟 / 结果 / 最近检测 / 心率 / 90天可用率 = 100% */
+.monitor-table th:nth-child(1) { width: 8%; }
+.monitor-table th:nth-child(2) { width: 16%; }
+.monitor-table th:nth-child(3) { width: 21%; }
+.monitor-table th:nth-child(4) { width: 8%; }
+.monitor-table th:nth-child(5) { width: 7%; }
+.monitor-table th:nth-child(6) { width: 11%; }
+.monitor-table th:nth-child(7) { width: 17%; }
+.monitor-table th:nth-child(8) { width: 12%; }
 .monitor-table th {
   padding: 10px 12px;
   text-align: left;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-2);
-  white-space: nowrap;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
   background: var(--bg);
   border-bottom: 1px solid var(--border);
 }
-.monitor-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.monitor-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; }
 .monitor-table tbody tr:last-child td { border-bottom: 0; }
 .monitor-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
 .monitor-table tbody tr[data-status="down"] { background: color-mix(in srgb, var(--down) 6%, transparent); }
@@ -380,7 +400,7 @@ body[data-view="table"] .grid { display: block; }
 tr[data-status="up"] .t-state { color: var(--up-text); }
 tr[data-status="down"] .t-state { color: var(--down-text); }
 tr[data-status="pending"] .t-state { color: var(--pending-text); }
-.t-name { white-space: nowrap; }
+.t-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .t-name .type-badge { margin-left: 8px; }
 .t-target {
   max-width: 280px;
@@ -392,9 +412,12 @@ tr[data-status="pending"] .t-state { color: var(--pending-text); }
   white-space: nowrap;
 }
 .t-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
-.t-hb { width: 160px; }
-.t-hb svg { display: block; width: 150px; height: 24px; }
+.t-hb svg { display: block; width: 100%; max-width: 150px; height: 24px; }
 .t-uptime { white-space: nowrap; }
-.uptime-bar-mini { display: inline-flex; width: 110px; height: 8px; margin-right: 8px; vertical-align: middle; }
+/* 可用率条随视口伸缩；极窄时只留百分比，避免挤压其他列 */
+.uptime-bar-mini { display: inline-flex; width: clamp(40px, 8vw, 110px); height: 8px; margin-right: 8px; vertical-align: middle; }
 .t-pct { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
+@media (max-width: 640px) {
+  .uptime-bar-mini { display: none; }
+}
 

public/index.html

@@ -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>

scripts/verify-layout.cjs

@@ -0,0 +1,120 @@
+/**
+ * shiroko-monitor 布局回归：任何宽度、任何内容都不应出现横向滚动
+ *
+ * 硬要求（用户明确）：不允许出现「需要滚动才能看全」的情况。
+ * 因此这里用**极端内容**（超长名称 / 超长 URL / 6 个分组 / 40 个目标）+ 13 种视口 × 2 种视图
+ * 做扫描，断言页面与表格容器都不能有横向溢出。
+ *
+ * 为什么要用极端内容：常规内容下很多撑破问题不会暴露（实测卡片视图在 320px 下
+ * 曾因 grid 的 min-width:auto 被长 URL 撑到 801px，溢出 495px）。
+ *
+ * 用法：node scripts/verify-layout.cjs
+ */
+const fs = require('node:fs');
+const http = require('node:http');
+const os = require('node:os');
+const path = require('node:path');
+const { spawn } = require('node:child_process');
+const { chromium } = require('playwright');
+
+const ROOT = path.join(__dirname, '..');
+const PROBER = path.join(ROOT, 'prober', 'node', 'index.js');
+const CHROME = 'C:/Program Files/Google/Chrome/Application/chrome.exe';
+const PORT = 8893;
+const WIDTHS = [320, 360, 390, 480, 600, 768, 820, 900, 1024, 1280, 1440, 1920, 2560];
+
+const results = [];
+const check = (name, pass, detail) => {
+  results.push({ name, pass });
+  console.log(`${pass ? '  ✓' : '  ✗'} ${name}${detail ? ` — ${detail}` : ''}`);
+};
+const MIME = { '.html': 'text/html;charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.webp': 'image/webp', '.png': 'image/png' };
+
+// 极端配置：长名称 + 长 URL + 多分组 + 多目标
+function hostileConfig() {
+  const groups = ['超长分组名称测试一二三四五', '公共服务', '基础设施与内网设备', 'UptimeRobot', '外部依赖', '测试用极端分组名'];
+  const monitors = [];
+  for (let i = 0; i < 40; i++) {
+    monitors.push({
+      id: `hostile-${i}`,
+      name: i % 3 === 0 ? `这是一个非常非常长的监控目标名称用于测试极端情况下的布局表现与截断行为-${i + 1}` : `目标-${i + 1}`,
+      group: groups[i % groups.length],
+      type: 'http',
+      url: i % 2 === 0 ? `https://very-long-subdomain-name-for-testing-layout.example.com/very/long/path/segment?with=query&and=more&even=more&idx=${i}` : `https://s${i}.example.com`,
+      expectStatus: [200],
+      interval: 60,
+      timeout: 5,
+    });
+  }
+  return monitors;
+}
+
+function runOnce(args) {
+  return new Promise((resolve) => {
+    const child = spawn(process.execPath, [PROBER, ...args], { stdio: 'ignore' });
+    child.on('exit', (code) => resolve(code));
+  });
+}
+
+async function main() {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-layout-'));
+  const cfg = path.join(tmp, 'monitors.json');
+  fs.cpSync(path.join(ROOT, 'public'), tmp, { recursive: true });
+  const base = JSON.parse(fs.readFileSync(cfg, 'utf8'));
+  base.settings.dataFilter = 'config';
+  base.monitors = hostileConfig();
+  fs.writeFileSync(cfg, `${JSON.stringify(base, null, 2)}\n`);
+  await runOnce(['--once', '--demo', `--config=${cfg}`, `--local-config=${path.join(tmp, 'none.json')}`, `--out=${path.join(tmp, 'status.json')}`]);
+  console.log(`极端内容：${base.monitors.length} 个目标 / 6 个分组，视口 ${WIDTHS.length} 种 × 2 视图\n`);
+
+  const server = http.createServer((req, res) => {
+    const rel = decodeURIComponent(req.url.split('?')[0]);
+    const file = path.join(tmp, rel === '/' ? 'index.html' : rel);
+    fs.readFile(file, (err, data) => {
+      if (err) {
+        res.writeHead(404);
+        res.end();
+        return;
+      }
+      res.writeHead(200, { 'content-type': MIME[path.extname(file)] ?? 'application/octet-stream' });
+      res.end(data);
+    });
+  });
+  await new Promise((r) => server.listen(PORT, r));
+
+  const browser = await chromium.launch({ executablePath: CHROME, args: ['--no-sandbox'] });
+  let worst = null;
+  try {
+    for (const view of ['table', 'cards']) {
+      for (const width of WIDTHS) {
+        const page = await browser.newPage({ viewport: { width, height: 900 } });
+        await page.goto(`http://localhost:${PORT}/?source=static&view=${view}`, { waitUntil: 'domcontentloaded' });
+        await page.waitForSelector('.card, table.monitor-table', { timeout: 20000 });
+        await page.waitForTimeout(400);
+        const r = await page.evaluate(() => ({
+          page: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+          wrap: (() => { const w = document.querySelector('.table-wrap'); return w ? w.scrollWidth - w.clientWidth : 0; })(),
+          grid: (() => { const g = document.querySelector('.grid'); return g ? g.scrollWidth - g.clientWidth : 0; })(),
+        }));
+        const bad = Math.max(r.page, r.wrap, r.grid);
+        if (!worst || bad > worst.bad) worst = { bad, view, width, r };
+        check(`${String(width).padStart(4)}px ${view} 无横向溢出`, bad <= 0, `页面 ${r.page} / 表格 ${r.wrap} / 网格 ${r.grid}`);
+        await page.close();
+      }
+    }
+  } finally {
+    await browser.close();
+    server.close();
+    fs.rmSync(tmp, { recursive: true, force: true });
+  }
+
+  if (worst && worst.bad > 0) console.log(`\n最大溢出：${worst.width}px ${worst.view} → ${worst.bad}px`);
+  const failed = results.filter((x) => !x.pass);
+  console.log(`\n结果：${results.length - failed.length}/${results.length} 通过`);
+  if (failed.length) process.exit(1);
+}
+
+main().catch((err) => {
+  console.error('FAILED:', err.stack || err.message);
+  process.exit(1);
+});