fix(web): 窄屏布局三处根因 + 页面滚动塌陷

在 375/320 屏上实机取证（三节点集群 192.168.2.{30,106,60}），修掉四个
独立缺陷。前三个是布局根因，第四个是被前三个掩盖的真 bug。

1. 全站没有 box-sizing 重置
   content-box 下 `.sidebar { width:100%; padding:10px 12px }` 在 375 视口
   实算 399px（320 屏 344px）。顶栏主题色块右缘 332 > 320，被
   `.sidebar{overflow-x:hidden}` 静默裁掉 ⇒ 主题切换在手机上点不到。
   桌面侧栏同样是 274px 而非声明的 246px。
   注：已有两个「窄屏顶栏右侧溢出」commit（64d3359 用 flex min-width/vw
   限宽、0559cc5 改 backdrop-filter）都在治症状，真因是盒模型。

2. fit-view-on-init 把画布缩到不可读
   画布用绝对图形坐标（x=60/760，两列随转发数向下增长），bbox 远大于
   手机视口。实测合成缩放 375 屏 0.3135 ⇒ 248px 的卡片渲成 85px、
   有效字号 4.39px；**1280 桌面也只有 0.6011 / 8.42px**（5 条转发即
   触发），所以这不只是窄屏问题。
   改为删掉 fit-view-on-init 自己接管：MIN_ZOOM=0.65 下限 +
   frameCanvas() 把最左上节点重贴到内边距边缘（fitView 是居中的，窄屏
   下会把两列接缝摆在视口正中，两边各看一半）。duration:0 保证量 rect
   时动画已停；初始 frame 只认一次，避免后续 add 节点把正在平移的用户
   拽走。挂 @init + @nodes-initialized（store 与节点分先后到达，任一
   单独触发都会 fit 空画布）。

3. el-dialog 固定宽度超出手机视口
   Element Plus 把 width 写成内联 --el-dialog-width。375 屏实测
   left=0 right=420，右上关闭按钮在屏外，只能横向滚 overlay 才够得到。
   窄屏下 clamp 到 calc(100vw - 24px)。

4. 【滚动塌陷】状态页在手机上完全无法滑动
   `.status-page` 是 height:100% + overflow:hidden 的 flex 列，内层
   `.status-body` 靠 flex:1 + overflow-y:auto 自己滚。375 屏下可用高度
   651px，而两个不可压缩子元素 topbar(122) + kpis(565) 已占 687px ⇒
   `.status-body` 被分到 **0px**，其中却有 1682px 内容。同时外层
   `.content` scrollHeight==clientHeight（无可滚内容）⇒ 整页没有任何
   可滚动元素，手势完全无响应。
   修法：让 `.content`（App.vue 已声明 flex:1 + overflow-y:auto）做唯一
   滚动容器，页面自身不再 height:100%/overflow。ClusterView /
   SettingsView 同类嵌套一并去掉，从根上消灭「按剩余空间算高度」这类
   算术错误。另把 ≤380px 的 KPI 单列改回两列（单列四张全宽卡自身就
   565px，超过整个视口，是塌陷的起因）。

验证（构建产物挂反代打真后端 + 共享 Chromium CDP）：
- 缩放 0.31→0.65、卡片 85→177px、有效字号 4.39→9.1px（320/375/414/1280 一致）
- bodyScrollW 344→320（320 屏），横向溢出清零；主题色块全部落回屏内
- 对话框 left 12 / right 363（完全在屏内，关闭键可达）
- 9 种视口 × 5 个页面 = 45 格全部「末块可达 + 无横向滚动」，console 零报错
  修复前：状态页 375/320/414 全部无滚动；1280 桌面状态/设置同样中招
- 三节点滚动重启部署，集群收敛 pending=0 / topo=4，owner 与实际
  worker 进程一一对应，journal 无 panic/fatal，reclaimed=2 各节点自愈

web/src/App.vue

@@ -446,7 +446,10 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
     gap: 2px;
     padding: 5px 2px;
     border-radius: 11px;
-    font-size: 10.5px;
+    /* Keep the tab label at the theme's 11px floor; the 10.5px here (and 9.5px
+     * at ≤380px) read as noise on a phone. "账号与密钥" is still handled by the
+     * .label ellipsis (width:100% + overflow:hidden). */
+    font-size: 11px;
     font-weight: 600;
     text-align: center;
   }
@@ -500,12 +503,13 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
 
 /* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条。
    角色徒章是 flex:0 0 auto 不可收缩的（“超级管理员”≨70px），极窄下隐去，
-   用户名与退出按钮保留。 */
+   用户名与退出按钮保留。
+   注意：底部 tab 文字不再随之降到 9.5px —— 它在手机上低于可读下限
+   （见 .sb-i 的 11px 注释），长标签交给 .label 的省略号处理。 */
 @media (max-width: 380px) {
   .sb-brand-text b { font-size: 13px; }
   .sb-identity { padding: 4px 7px; }
   .sb-identity .id-level { display: none; }
-  .sb-i { font-size: 9.5px; }
   .content { padding-left: 10px; padding-right: 10px; }
 }
 </style>