fix(webui): 窄屏日历/详情的圆角——圆角要给到「能裁剪的那一层」

用户（2026-09-14）：「我这边看还是方角」。上一轮我只修了宽屏那条分支，
窄屏（手机/平板，<1024px）当时仍然是方角 —— 这次按像素量到了。

## 实测（真浏览器读渲染像素，不是读声明）

390x844 日历页左上角：
  改前 (255,255,255) 纯白 → 方角；面板 computed radius = 0px
  改后 (249,250,251) 页面底色 → 圆角；上边缘内缩 8px

## 根因：圆角落在**裁不住东西**的那层上

窄屏走 NarrowStack（`list`+`main` 的覆盖式容器，日历与收件箱详情都用它）：

    .narrow-shell > *          ← 14px 加在这里（App.tsx 的 flex-1 min-h-0 flex）
      NarrowStack 根            ← overflow:hidden，但 radius 0px
        absolute inset-0 flex   ← 透明
          gridPane (bg-white)   ← 0px，直角原样露出来

`overflow: visible` 的透明 flex 容器拿到圆角 = 什么也没发生。
NarrowStack 的根节点是**唯一**同时具备「自己 overflow:hidden」与「包住有底色那一层」
的层，圆角必须加在它上面 —— 加给它，底层页与滑入的覆盖层就一起被裁到圆角里。

顺带修好一处同类问题：**收件箱详情在窄屏也是方角**（同一个容器），
以前没人报过，这次一起圆了（实测同上）。

## 判据

narrow-layout 新增 2 条，分开钉两件事（分开一条都不算修好）：
  ① 那层自己带上面板圆角（类名与 CSS 规则接得上）；
  ② 那一层同时具备裁剪能力（overflow:hidden）。
三组变异全部红在对的那条上（去掉类名 / 去掉 border-radius / 去掉 overflow-hidden）。

narrow-verify（手动探针）新增**读像素**的能力与两条判据 —— 这件事只有像素能回答：
computed radius 是 14px、角上 2px 处"谁在画"也指着面板本身，**但渲染出来仍是方的**
（圆角加在没底色的层上，被内层直角原地盖掉）。所以这里截 1x1 再解 PNG，
只用 zlib，不引图像库。方角=255,255,255 / 圆角=249,250,251，两个数字就能分辨。

client/electron/src/components/NarrowStack.tsx

@@ -56,7 +56,9 @@ export default function NarrowStack({
   }, [open]);
 
   return (
-    <div className="flex-1 min-h-0 relative overflow-hidden">
+    /* `narrow-stack`：这一层才是「能裁剪 + 包住有底色的那一层」，
+       圆角加在这里底层与覆盖层才会一起被裁（详见 index.css）*/
+    <div className="narrow-stack flex-1 min-h-0 relative overflow-hidden">
       {/* 底层：始终挂载。打开覆盖层时用 aria-hidden 把它从无障碍树里摘掉，
           否则屏幕阅读器会读到两层内容。
 

client/electron/src/index.css

@@ -877,6 +877,26 @@ html[data-bg='on'] .hover\:bg-gray-100:hover {
   border-radius: var(--radius-card);
 }
 
+/*
+ * ★ 窄屏「页面覆盖」容器（NarrowStack 的根节点）
+ *   用户（2026-09-14）：「我这边看还是方角」—— 上一轮我只修了宽屏那条分支。
+ *
+ * 它是窄屏上**唯一**同时具备两个条件的层：
+ *   ① 自己 `overflow: hidden`（能裁）；
+ *   ② 包着真正有底色的那一层（底层页 / 滑入的覆盖层）。
+ *
+ * 而 `.narrow-shell > *` 那条圆角落在它**外面**那层透明 flex 容器上
+ * （App.tsx 的 `<div className="flex-1 min-h-0 flex">`），那层 `overflow: visible`
+ * 裁不住任何东西 —— 于是白底页面的直角原样露出来。
+ * 实测 390x844 日历页：左上角像素纯白（方角），面板 computed radius = 0px。
+ *
+ * 所以圆角必须加在这一层：加给它，底层与覆盖层就**一起**被裁到圆角里。
+ * （日历与收件箱详情都走这个容器，一条规则同时修好；收件箱详情以前也是方角。）
+ */
+.narrow-stack {
+  border-radius: var(--radius-card);
+}
+
 html[data-bg='on'] .app-shell {
   padding: var(--pane-gap);
   gap: var(--pane-gap);

client/electron/test/manual/narrow-verify.mjs

@@ -15,6 +15,38 @@ import {
   scrollHealth,
   SMALL
 } from './narrow-probe-helper.mjs';
+import { inflateSync } from 'node:zlib';
+
+/**
+ * 取屏幕上某个 CSS 坐标的像素颜色。
+ *
+ * # 为什么非要有“读像素”这个能力
+ *
+ * 「圆角到底有没有生效」是**只有像素能回答**的问题。
+ *
+ * 用户（2026-09-14）：「我这边看还是方角」。当时所有别的检查都是绿的：
+ *   - `getComputedStyle(pane).borderRadius` === `14px`（外壳那条规则确实加上了）；
+ *   - 角上 2px 处“谁在画”也指着那块面板本身（elementFromPoint 沿祖先链找底色）。
+ * 但实际渲染出来是方的 —— 因为那个 14px 加在一个**没有底色、也裁不住东西**的层上，
+ * 白底内层用自己的直角把它原地盖掉了。
+ *
+ * 实测两个数字就能分辨（390x844 日历页左上角）：
+ *   方角：(255,255,255)   圆角：(249,250,251)＝页面底色
+ * 所以这里截 1×1 再解 PNG —— 只用到 `zlib`，不引图像库。
+ */
+async function pixelAt(page, x, y) {
+  const buf = await page.screenshot({ clip: { x, y, width: 1, height: 1 } });
+  let p = 8;
+  const idat = [];
+  while (p < buf.length) {
+    const len = buf.readUInt32BE(p);
+    const type = buf.toString('ascii', p + 4, p + 8);
+    if (type === 'IDAT') idat.push(buf.subarray(p + 8, p + 8 + len));
+    p += 12 + len;
+  }
+  const raw = inflateSync(Buffer.concat(idat));
+  return [raw[1], raw[2], raw[3]]; // [filter, R, G, B, …]
+}
 
 const { browser, ctx, page, issues } = await openApp();
 const failed = [];
@@ -166,6 +198,45 @@ await check('320px 模型范围排序按钮命中区达标', async () => {
   return { ok: small.length === 0, note: `${r.length} 个，最小 ${Math.min(...r.map(x => x.hitH))}px 高` };
 });
 
+// 面板的圆角：只有像素能回答（见文件头 pixelAt 的说明）。
+// 日历与收件箱详情都走 NarrowStack（窄屏的「页面覆盖」容器），
+// 圆角必须加在它那一层 —— 它在外面那层透明 flex 容器上时，两个页面都是方角。
+await check('日历页：面板左上角真的被切掉了（像素）', async () => {
+  await page.click('button:has-text("日历")');
+  await page.waitForTimeout(2500);
+  const pane = await page.evaluate(() => {
+    const el = [...document.querySelectorAll('div')].find(e =>
+      /flex-1 min-w-0 flex flex-col bg-white min-h-0/.test(String(e.className))
+    );
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return { x: Math.round(r.x), y: Math.round(r.y), radius: getComputedStyle(el).borderRadius };
+  });
+  if (!pane) return { ok: false, note: '找不到日历主面板' };
+  const px = await pixelAt(page, pane.x + 1, pane.y + 1);
+  // 页面底色是 gray-50（249,250,251）；方角那里会是纯白 255,255,255
+  const rounded = px[0] < 253;
+  return { ok: rounded, note: `角上像素=${px.join(',')}（圆角≈249,250,251；方角=255,255,255）` };
+});
+
+await check('收件箱详情：面板左上角真的被切掉了（像素）', async () => {
+  await page.click('button:has-text("通信")');
+  await page.waitForTimeout(1500);
+  const row = page.locator('button.w-full.text-left').first();
+  if ((await row.count()) === 0) return { ok: true, note: '收件箱是空的，跳过' };
+  await row.click();
+  await page.waitForTimeout(2000);
+  const pane = await page.evaluate(() => {
+    const el = document.querySelector('div.relative.flex-1.min-w-0.flex.flex-col.bg-white');
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return { x: Math.round(r.x), y: Math.round(r.y) };
+  });
+  if (!pane) return { ok: false, note: '找不到详情面板' };
+  const px = await pixelAt(page, pane.x + 1, pane.y + 1);
+  return { ok: px[0] < 253, note: `角上像素=${px.join(',')}` };
+});
+
 console.log('\nissues:', issues.length ? issues : '无');
 console.log(failed.length === 0 ? '\n窄屏实测：全部通过' : `\n窄屏实测：${failed.length} 项失败 — ${failed.join(', ')}`);
 

client/electron/test/narrow-layout.test.mjs

@@ -250,6 +250,28 @@ check(
   calFirst !== '' && !/\.cal-panes\s*>\s*:first-child\s*>\s*\*/.test(css),
   '左栏本身就是白底面板；再往下就给到了第一个子元素（工具条），圆到不该圆的东西上'
 );
+
+// 5.11) 窄屏「页面覆盖」容器（NarrowStack）自己必须带圆角，而且它得是**能裁剪**的那一层。
+//
+// 用户（2026-09-14）：「我这边看还是方角」—— 上一轮我只修了宽屏那条分支。
+// 实测 390x844：日历页左上角像素是**纯白 255,255,255**（方角），面板 radius 0px；
+// 而同页面的 `.narrow-stack` 祖先拿到的 radius 恰好是 14px。
+//
+// 因为 `.narrow-shell > *` 那条圆角落在 NarrowStack **外面**那层透明 flex 容器上
+// （App.tsx 的 `flex-1 min-h-0 flex`），它 `overflow: visible`，裁不住任何东西；
+// 真正包住白底页面、又自带 `overflow: hidden` 的是 NarrowStack 的根节点。
+// 所以这两件事必须同时成立，分开一条都不算修好 —— 所以分开钉。
+check(
+  '窄屏覆盖容器（NarrowStack 根）自己带上面板圆角',
+  /className="narrow-stack[ "]/.test(stack) &&
+    /\.narrow-stack\s*\{[^}]*border-radius:\s*var\(--radius-card\)/.test(css),
+  '圆角只加在外面那层透明 flex 容器上 —— 它裁不住东西，白底直角照样露出来'
+);
+check(
+  '那一层同时具备裁剪能力（overflow:hidden）',
+  /className="narrow-stack[^"]*overflow-hidden/.test(stack),
+  '圆角落在了裁不住东西的层上：观感仍是方角（computed radius 却是 14px）'
+);
 check('根视口使用 100dvh 跟随软键盘', css.includes('@supports (height: 100dvh)'));
 
 // 6) 横向内边距在窄屏收窄（px-6 在 375px 屏上白吃 48px）