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,两个数字就能分辨。
This commit is contained in:
@ -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)
|
||||
|
||||
Reference in New Issue
Block a user