fix: 「我的」页无法滚动 —— 缺滚动容器；顺带修矮屏登录页

用户反馈「我的页面点击进入后无法滑动」。

## 根因：AccountPage 根本没有滚动容器

窄屏外壳是 `h-full flex flex-col overflow-hidden`，页面本身是
`flex-1 min-w-0 flex flex-col`，中间缺一层 `overflow-y-auto` ——
内容超出的部分**直接被裁**，滚不到也点不到。

实测 390px 下内容（资料 + 权限 + 改密码 + 密钥 + 退出）需 860px、容器只有
795px，「退出登录」按钮连同下面 65px 一起消失；1280x800 的桌面上同样看不到。

其余六个页面级组件（AdminUsersPage / MailView / ComposePage / ThreadView /
ContactPanel / MailList）都有这一层，只有它漏了 —— 上一轮把退出登录搬进这页
之后内容变高，问题才显形。

## 顺带：登录页与初始化页在矮屏滚不到底

卡片高约 371px，而 `h-full flex items-center` 在内容超高时让它上下**同时**溢出，
溢出到顶部那段是滚不到的（`scrollTop` 最小是 0）—— 实测 568x280（横屏手机，
或软键盘弹出后的可视高度）下「登录」按钮完全在视口外，光加 `overflow-y-auto`
也够不着。

改用卡片自己的 `my-auto` 而不是容器的 `items-center`：auto margin 在空间不足时
自动退化为 0，矮屏变成正常的顶对齐可滚布局，高屏仍然垂直居中
（390x844 与 1280x800 实测 centered=true，568x280 下滚到底能看到按钮）。

## 两侧都加了检查

- 结构断言：七个页面级组件都必须含 `overflow-y-auto`；
  登录/初始化页必须有 `my-auto` 且不用 `h-full ... items-center`
- 实测脚本新增 `scrollHealth()`：每页都有滚动容器，且没有内容被
  `overflow-hidden` 的父级裁掉

判据刻意是「**有**滚动容器」而不是「当前正在滚动」—— 内容暂时不够高时后者
为假，但页面是健康的；真正的 bug 是根本没有那一层。

## 验证

窄屏实测 18 项 + 宽屏回归 5 项全通过；结构断言从 28 条扩到 37 条。
生产已部署。

web/test/manual/narrow-probe-helper.mjs

@@ -171,3 +171,50 @@ export async function hitTest(page, selector) {
     return out;
   }, selector);
 }
+
+/**
+ * 每个页面是否**有**纵向滚动容器。
+ *
+ * 判据是「存在 overflow-y:auto|scroll 的容器」，不是「当前正在滚动」——
+ * 内容暂时不够高时后者为假，但页面是健康的。真正的 bug 是**根本没有**滚动
+ * 容器：内容一旦超过视口就被 `overflow-hidden` 的父级裁掉，没有任何办法看到。
+ *
+ * 「我的」页就是这样坏的：内容（资料+权限+改密码+密钥+退出）在 390px 下需要
+ * 860px，容器只有 795px，超出那 65px 连同「退出登录」按钮一起消失。
+ *
+ * @returns {{ hasScroller: boolean, scrollers: object[], clipped: object[] }}
+ */
+export async function scrollHealth(page) {
+  return await page.evaluate(() => {
+    const root = document.querySelector('#root');
+    const scrollers = [];
+    for (const el of root.querySelectorAll('*')) {
+      const cs = getComputedStyle(el);
+      if (cs.overflowY === 'auto' || cs.overflowY === 'scroll') {
+        scrollers.push({
+          cls: (el.className || '').toString().slice(0, 45),
+          scrollH: el.scrollHeight,
+          clientH: el.clientHeight,
+          needsScroll: el.scrollHeight > el.clientHeight + 4
+        });
+      }
+    }
+    // 内容超出但被 overflow:hidden 的父级裁掉 —— 这才是真正的问题
+    const clipped = [];
+    for (const el of root.querySelectorAll('*')) {
+      const cs = getComputedStyle(el);
+      if (el.scrollHeight > el.clientHeight + 20 && cs.overflowY === 'visible') {
+        const p = el.parentElement;
+        const pcs = p ? getComputedStyle(p) : null;
+        if (pcs && (pcs.overflow === 'hidden' || pcs.overflowY === 'hidden')) {
+          clipped.push({
+            cls: (el.className || '').toString().slice(0, 50),
+            have: el.clientHeight,
+            need: el.scrollHeight
+          });
+        }
+      }
+    }
+    return { hasScroller: scrollers.length > 0, scrollers, clipped: clipped.slice(0, 4) };
+  });
+}

web/test/manual/narrow-verify.mjs

@@ -7,7 +7,14 @@
  *
  * 用法：ADMIN_PW=<密码> node web/test/manual/narrow-verify.mjs
  */
-import { openApp, overflowX, tapTargets, hitTest, SMALL } from './narrow-probe-helper.mjs';
+import {
+  openApp,
+  overflowX,
+  tapTargets,
+  hitTest,
+  scrollHealth,
+  SMALL
+} from './narrow-probe-helper.mjs';
 
 const { browser, page, issues } = await openApp();
 const failed = [];
@@ -115,6 +122,24 @@ for (const label of ['收件', '联系人', '管理', '我的']) {
   });
 }
 
+// 每个页面都必须有纵向滚动容器 —— 否则内容一超过视口就被裁掉看不到。
+// 「我的」页曾经缺这个：390px 下内容需 860px、容器 795px，
+// 「退出登录」按钮连同下面 65px 一起消失，滚也滚不到。
+for (const label of ['收件', '发件', '联系人', '管理', '我的']) {
+  await check(`${label}页有纵向滚动容器`, async () => {
+    await page.click(`nav button:has-text("${label}")`);
+    await page.waitForTimeout(1200);
+    const h = await scrollHealth(page);
+    for (const c of h.clipped) console.log('         被裁:', JSON.stringify(c));
+    return {
+      ok: h.hasScroller && h.clipped.length === 0,
+      note: h.hasScroller
+        ? `${h.scrollers.length} 个容器${h.clipped.length ? '，但有内容被裁' : ''}`
+        : '没有滚动容器'
+    };
+  });
+}
+
 console.log('\n最窄（320px）：');
 await page.setViewportSize(SMALL);
 await page.waitForTimeout(800);

web/test/narrow-layout.test.mjs

@@ -134,6 +134,31 @@ const thread = read('../src/components/ThreadView.tsx');
 check('对话树缩进随屏宽自适应', thread.includes('useIsNarrow') && /narrow \? 10 : 20/.test(thread));
 check('对话树窄屏有返回出口', thread.includes('<BackButton'));
 
+// 5.6) 每个页面级组件都要有纵向滚动容器。
+//      窄屏外壳是 `h-full flex flex-col overflow-hidden`，页面本身是
+//      `flex-1 min-w-0 flex flex-col` —— 内容超过视口时**没有任何办法滚到**，
+//      超出那段直接被裁。AccountPage 曾经就缺这个：390px 下内容需 860px、
+//      容器 795px，「退出登录」按钮连同下面 65px 一起消失。
+//      判据是「存在 overflow-y-auto」，不是「当前正在滚动」——
+//      内容暂时不够高时后者为假，但页面是健康的。
+for (const f of ['AccountPage', 'AdminUsersPage', 'MailView', 'ComposePage', 'ThreadView', 'ContactPanel', 'MailList']) {
+  const src = read(`../src/components/${f}.tsx`);
+  check(`${f} 有纵向滚动容器`, src.includes('overflow-y-auto'));
+}
+
+// 5.7) 居中的单卡片页（登录 / 初始化）在矮屏必须能滚到底。
+//      `items-center` 在内容超高时让卡片上下同时溢出，而溢出到顶部那段
+//      滚不到（scrollTop 最小是 0）—— 实测 568x280 下「登录」按钮完全在
+//      视口外。改用卡片自己的 my-auto：空间不足时 auto margin 退化为 0。
+for (const f of ['LoginPage', 'SetupPage']) {
+  const src = read(`../src/components/${f}.tsx`);
+  check(
+    `${f} 矮屏可滚且不用 items-center 居中`,
+    src.includes('overflow-y-auto') && src.includes('my-auto') &&
+      !/h-full[^"]*items-center/.test(src)
+  );
+}
+
 // 6) 横向内边距在窄屏收窄（px-6 在 375px 屏上白吃 48px）
 const wide = ['MailView', 'ComposePage', 'ThreadView', 'AccountPage', 'AdminUsersPage'];
 for (const f of wide) {