fix(ui): 隔离设置弹窗打开时的后台滚动区域

[H-Chris233]

User description

摘要

Fixes #580。

解决设置弹窗打开时，后台页面 .ol-thinscroll 滚动区域仍可滚动、滚动条穿透并覆盖弹窗的问题。通过在 FloatingShell 根节点增加设置打开状态标记，并在 CSS 层隔离后台滚动区域，避免 WebKitGTK 环境下自定义滚动条绘制到弹窗层之上。

修复 / 新增 / 改进

• 在 FloatingShell 根节点增加 data-ol-settings-open 属性，用于标记 Settings modal 打开状态。
• 增加设置弹窗打开状态下的滚动隔离 CSS：
  • 禁止后台滚动容器继续滚动（overflow: hidden）。
  • 隐藏后台 .ol-thinscroll 的 WebKit 自定义滚动条，避免 Linux WebKitGTK 下滚动条穿透覆盖弹窗。
• 新增 settings-modal-scroll-isolation.test.mjs：
  • 校验 FloatingShell 正确挂载 data-ol-settings-open 属性。
  • 校验对应 CSS selector 存在并覆盖目标滚动区域。
• 采用状态驱动方式隔离背景滚动，不改变 SettingsModal DOM 结构，降低对现有 UI 和动画逻辑的影响。

兼容

• 不包含：

  • 不修改 SettingsModal 渲染方式。
  • 不引入 React Portal。
  • 不改变弹窗视觉样式和交互逻辑。
  • 不影响非设置弹窗场景下的页面滚动行为。

• 对现有用户 / 本地环境 / 构建流程的影响：

  • 设置弹窗打开期间，后台页面滚动能力被临时禁用，符合模态窗口预期行为。
  • 关闭设置弹窗后，页面滚动行为恢复。
  • 对 macOS / Windows 现有行为无影响。
  • 主要改善 Linux WebKitGTK（如 Debian KDE Wayland）环境下的滚动条穿透问题。

测试计划

• 命令：npm run build

• 结果：TypeScript 编译及前端构建通过。

• 命令：node settings-modal-scroll-isolation.test.mjs

• 结果：测试通过，确认属性挂载和 CSS 隔离规则存在。

• 证据路径：

  • openless-all/app/src/components/FloatingShell.tsx
  • openless-all/app/src/styles/tokens.css
  • settings-modal-scroll-isolation.test.mjs

• 人工验证：

  • Debian KDE Wayland + WebKitGTK 环境打开历史记录页滚动后进入设置。
  • 确认后台滚动条不再显示在设置弹窗之上。

---

PR Type

Bug fix

---

Description

• Add data-ol-settings-open attribute to FloatingShell root when settings modal opens

• Hide background .ol-thinscroll overflow and scrollbar via CSS under that attribute

• Add test script to validate attribute placement and CSS selectors

---

Diagram Walkthrough

flowchart LR
  A["FloatingShell"] --> B["data-ol-settings-open attribute"]
  B --> C["CSS .ol-thinscroll rules"]
  C --> D["overflow: hidden; scrollbar hidden"]

Loading

File Walkthrough

	Relevant files
Enhancement	FloatingShell.tsx Add data attribute for settings open state                              openless-all/app/src/components/FloatingShell.tsx Added data-ol-settings-open attribute to the main shell div Attribute value is 'true' when settingsOpen is true, undefined otherwise +1/-0
Bug fix	tokens.css Add CSS to isolate background scroll                                          openless-all/app/src/styles/tokens.css Added CSS rule to hide overflow and scrollbar of .ol-thinscroll when data-ol-settings-open is present Targets both standard and WebKit scrollbars to prevent scrollbar bleed-through +7/-0
Tests	settings-modal-scroll-isolation.test.mjs Add test for scroll isolation                                                        openless-all/app/scripts/settings-modal-scroll-isolation.test.mjs Verifies data-ol-settings-open attribute appears exactly once in FloatingShell.tsx Checks CSS selectors for overflow and scrollbar hiding exist in tokens.css Validates attribute position is before the background scroll area and SettingsModal +62/-0

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 0508352)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 580 - Partially compliant Compliant requirements: 设置弹窗打开时，后台滚动条被隐藏（CSS overflow: hidden 和 display: none for webkit scrollbar），不再覆盖弹窗 采用状态驱动方式，不需要JS直接操作DOM，符合方向之一 Non-compliant requirements: 无 Requires further human verification: 无

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ No major issues detected

[github-actions]

Persistent review updated to latest commit 0508352