fix(web): 窄屏顶栏右侧溢出 — flex 自动最小尺寸 + vw 限宽两处误算

两个原因叠加导致顶栏横向溢出：

1. "webui4frpc" 是不可断行单词，.sb-brand-text 没给 min-width:0 +
   overflow:hidden，其 flex 自动最小尺寸就等于 min-content（≈85px），
   顶栏因此拿不出空间给右侧身份区，超出部分溢出。现给品牌文字整条链路
   加可收缩约束，标题用 ellipsis 截断。

2. .sb-identity 用 max-width:42vw / .id-name 用 14vw 限宽：vw 含垂直
   滚动条宽度，比实际可用内容宽度大；且 max-width 只封顶盒子，内部
   flex:0 0 auto 的角色徽标与退出按钮仍会把它撑开。改为全链路
   min-width:0 + overflow:hidden，由 flex 自行分配（.sb-foot 也从
   flex:0 0 auto 改 0 1 auto，允许被压缩）。

另加 .sidebar { overflow-x: hidden } 作兜底，任何子项算错都不再产生
横向滚动条；≤380px 隐藏角色徽标（它不可收缩，"超级管理员"≈70px）。

验证：tsc --noEmit 通过、npm run build 通过、产物 CSS 已确认规则生效；
三节点部署 0.1.2 后环正常（cycle 推进、pending=0、topo=5）。

web/src/App.vue

@@ -384,7 +384,9 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
-    overflow: visible;
+    overflow: hidden;
+    /* 兵家必争：任何子项算错都不得弄出横向滚动条 */
+    overflow-x: hidden;
     border-right: none;
     border-bottom: 1px solid var(--w4f-line);
     padding-top: max(10px, env(safe-area-inset-top));
@@ -403,6 +405,16 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
     gap: 8px;
     flex: 1 1 auto;
     min-width: 0;
+    overflow: hidden;
+  }
+  /* 品牌文字必须可收缩：“webui4frpc”是不可断行单词，不给 min-width:0
+     + overflow:hidden 的话它的 flex 自动最小尺寸等于 min-content（≨85px），
+     顶栏就拿不出空间给右侧身份区，溢出为横向滚动。 */
+  .sb-brand-text { min-width: 0; overflow: hidden; }
+  .sb-brand-text b {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .sb-logo { width: 30px; height: 30px; border-radius: 10px; }
   .sb-brand-text b { font-size: 14.5px; }
@@ -451,23 +463,30 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
     box-shadow: none;
   }
 
-  /* 身份与主题折进顶条右侧 */
+  /* 身份与主题折进顶条右侧。
+     不再用 vw 限宽：vw 含垂直滚动条宽度，会比实际可用内容宽大；而且
+     max-width 只封顶盒子，内部 flex:0 0 auto 的徒章/按钮仍会撑出去。
+     改为全链路可收缩（min-width:0 + overflow:hidden），由 flex 自行分配。 */
   .sb-foot {
     margin-top: 0;
     padding-top: 0;
     display: flex;
     align-items: center;
     gap: 8px;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
+    min-width: 0;
   }
   .sb-identity {
     margin-bottom: 0;
     padding: 5px 8px;
     font-size: 11.5px;
-    max-width: 42vw;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: none;
+    overflow: hidden;
   }
-  .sb-identity .id-name { max-width: 14vw; }
-  .sb-theme { margin-bottom: 0; }
+  .sb-identity .id-name { min-width: 0; max-width: none; }
+  .sb-theme { margin-bottom: 0; flex: 0 0 auto; }
   .sb-theme .sw { width: 22px; height: 22px; border-radius: 7px; }
 
   .main { height: auto; flex: 1; min-height: 0; }
@@ -479,10 +498,12 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
   }
 }
 
-/* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条 */
+/* 极窄（≤ 380px，iPhone SE / 小屏安卓）：进一步压缩顶条。
+   角色徒章是 flex:0 0 auto 不可收缩的（“超级管理员”≨70px），极窄下隐去，
+   用户名与退出按钮保留。 */
 @media (max-width: 380px) {
   .sb-brand-text b { font-size: 13px; }
-  .sb-identity { max-width: 38vw; padding: 4px 7px; }
+  .sb-identity { padding: 4px 7px; }
   .sb-identity .id-level { display: none; }
   .sb-i { font-size: 9.5px; }
   .content { padding-left: 10px; padding-right: 10px; }