diff --git a/web/src/App.vue b/web/src/App.vue
index c151fbd..05f454c 100644
--- a/web/src/App.vue
+++ b/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; }