[CodFrm]

Checklist / 检查清单

• Fixes mentioned issues / 修复已提及的问题
• Code reviewed by human / 代码通过人工检查
• Changes tested / 已完成测试

「修复已提及的问题」未勾：触发链已在 macOS 上用 Chrome 127/150/151/153 复现并修复，但报告者的 Windows 环境未实机验证（见「已知限制」）。

Description / 描述

背景

#1800：Windows 10 + Chrome 127 下，popup 只剩一条约 25px 宽、带经典滚动条的细条。排查发现 popup 的尺寸有两处写死，都和浏览器"popup 窗口按内容自适应"的模型冲突。

1. 宽度。popup.html 用 @media (min-width: 365px) 在宽视口时切到 width: 100%，目的是适配移动端（[BUG] Edge 安卓移动端适配（脚本猫界面元素错位） #686）。但桌面 popup 出现经典滚动条时，视口宽度 = 360 + 滚动条宽，会命中这条规则。width: 100% 没有内在宽度，Chrome ≤150 的自适应算法就把窗口夹到 25px，之后不再撑开。Chrome 151 引入 AutoSizeUsesScrollWidthForOverflow（CL 7882031）后能撑回来，但宽度会漂到 440+px。
2. 高度。根容器写死 max-h-[600px]（CSS px），列表在内部滚动；而 popup 窗口上限是 600 DIP。默认缩放 125% 时窗口只有 480 CSS px，内容被裁出窗口，整个文档开始滚动：页眉滚走，页脚版本号被挤出可视区。这条文档级滚动条也就是第 1 点的触发条件——issue 截图里带箭头的经典滚动条正是它，内部列表用的是 8px 自定义滚动条。headless 下窗口上限更低，100% 缩放 + 30 个脚本也会出现。另外，移动端整屏 popup 内容不足一屏时，页脚悬在内容下方，没有贴底。

本次改动

• dce8bbb（宽度）：去掉媒体查询，改为 html { width: 360px; min-width: 100% }。桌面的内在宽度恒为 360px，与视口无关。百分比 min-width 只在移动端视口被撑满时生效，保留 [BUG] Edge 安卓移动端适配（脚本猫界面元素错位） #686 的效果。
• 0b380f9（高度）：文档成为唯一滚动容器。去掉固定高度上限和内部 overflow-auto；警告和页眉区 sticky top-0，页脚 sticky bottom-0；根容器 min-h-screen，让移动端页脚贴底。scrollbar-custom 从列表移到 <html> 上。

实现考虑

• 不能用 vh 当高度上限。实测把根容器上限改成 100vh 后，127 和 153 都被夹到 150px（html 的 min-height）：自适应时视口高度依赖内容，形成和宽度问题同样的循环。
• min-h-screen 不会把桌面撑高。在 127 和 153 上、缩放 0.8 / 1 / 1.25 下都验证过，没有卡高；在 153 上折叠分组后 popup 仍会变矮（566 → 314）。

验证

所有浏览器验证都在 headless 下进行，用真实 action popup（chrome.action.openPopup + CDP 测量）。"经典滚动条"指在 macOS 上用 AppleShowScrollBars=Always 模拟 Windows。

场景	origin/main	dce8bbb	0b380f9
Chrome 127，125%，12 脚本，经典滚动条	宽 20px 细条，页脚不可见	内容宽 360，页脚不可见	内容宽 360，页脚可见
Chrome 153，125%，12 脚本，经典滚动条	内容宽 446，页脚不可见	内容宽 360，页脚不可见	内容宽 360，页脚可见
Chrome 153，100%，30 脚本，经典滚动条	内容宽 445，页脚不可见	—	内容宽 360，页脚可见
Chrome 153，100%，0 脚本	360×322	—	360×322（无变化）
移动端模拟 412×915（明 / 暗）	宽 412，页脚在 323	—	宽 412，页脚贴底 915

• 宽度修复在 Chrome 127 / 150 / 151 / 153 上都验证过：强制触发条件下内容宽都是 360。Chrome 151 加 --disable-features=AutoSizeUsesScrollWidthForOverflow 后，旧版同样塌成 25px。
• 新增 e2e/popup-autosize.spec.ts：
  • 真实 popup，125% 缩放 + 12 个匹配脚本：内容宽 360、页眉页脚都在可视区、没有内部滚动区、文档滚动条已主题化；
  • 移动端模拟：宽度填满、页脚贴底。
  • 在 origin/main 和 dce8bbb 上都会失败（页眉被滚到 -51px / 移动端页脚在 323），在本 PR 上通过。--repeat-each=5 --workers=2 下 10/10 通过。
• 删除 App.test.tsx 中已失效的结构断言：根容器 max-h/overflow-hidden、列表 overflow-auto（契约已改为文档滚动），以及 popup.html @media 的文件内容断言。对应行为都由上面的 e2e 以真实布局覆盖。CI 上一轮唯一失败的就是那条 @media 断言。
• Node 22（与 CI 一致）下：
  • pnpm run lint：通过
  • vitest：popup 下 4 个测试文件 + viewport-meta + prerender-theme，71 passed
  • playwright test e2e/popup-autosize.spec.ts e2e/popup.spec.ts e2e/popup-matching-regressions.spec.ts：9 passed
• 本地全量 vitest 无法作为信号：干净的 origin/main 上同样有 141 个文件失败（chrome.permissions mock 被前序用例替换后，同 worker 后续 suite 报 permissions.reset is not a function），全量以 CI 为准。

已知限制

• 报告者的 Windows 环境未实机验证，只在 macOS 上模拟了经典滚动条和缩放。修复不依赖具体触发条件。
• Edge Android 真机未测，只做了移动端模拟。
• Firefox popup 未测。
• 文档滚动时，经典滚动条现在贯穿整个 popup（包括吸顶区），而不是只在列表旁边。这是有意的取舍，换来页眉页脚在任何缩放下都可见。

建议审查重点

• src/pages/popup/App.tsx 根容器：滚动容器从列表改成了文档。吸顶区和页脚的背景、层级（z-10）在明暗主题下是否遮挡下拉菜单或 Popconfirm（Radix 浮层为 z-50，本地点开过「更多」菜单的 e2e 通过）。

Fixes #1800