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）

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>