fix(ui): 修复搜索栏盖住顶栏与弹层背景可滚动两个问题 - #312
Conversation
… sheets
- Header sticky top bar raised z-40 -> z-50. The repository search bar's
input row sits at relative z-40 later in the DOM, so once it scrolled up
to the header band it painted on top of the header (same stacking level,
later order wins). The header is page chrome and must sit above in-flow
page content; Radix portals keep stacking above it via document order.
- Modal scroll lock now reaches the root scroller. react-remove-scroll
only writes overflow on body, but body overflow never propagates to the
viewport because html owns overflow (overflow-y: scroll), so the page
behind the RepositoryChatSheet overlay stayed scrollable (scrollbar
drag + wheel) — the "second scrollbar" next to the sheet's message list.
html:has(body[data-scroll-locked]) { overflow: hidden } locks the real
scroller; hidden (not clip) keeps the viewport a scroll container so the
scroll offset, the sticky header anchor and the scrollbar-gutter
reservation all survive the lock, and the lock releases on close.
Verified with a Playwright E2E against the dev server (mocked GitHub API):
12/12 checks — header paints above the search bar at overlap, sheet open
freezes page scroll (wheel + offset preserved), unlock restores scrolling.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthrough本次变更调整页头的层级，并新增根滚动容器锁定规则。滚动锁定时， Changes界面覆盖层行为
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: ⚪ Minimal · up to 该 PR 仅调整顶栏层级并在弹层打开时锁定页面背景滚动，影响范围局限于浏览器界面行为；当前没有可操作的合并阻断风险，完成常规检查后即可合并。 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Full details: Docstring CoverageExplanation No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.) ✨ Finishing Touches📝 Generate docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
问题
仓库页 AI 搜索栏滚动到顶栏位置时会盖住顶栏
Header为sticky top-0 z-40，而SearchBar输入行为relative z-40。两者同一层叠级别（z-40），搜索栏在 DOM 中靠后，同层级后者胜出，因此页面滚动使搜索栏进入顶栏区域时直接绘制在顶栏之上。z-50。顶栏属于页面 chrome，应始终高于文档流内容；Radix portal 弹层（z-50、挂在 body 末尾）仍按文档顺序盖在顶栏之上，层叠关系不受影响。仓库问答边栏出现两个滚动条，最右侧滚动条在边栏弹出时仍能滚动遮罩下层的仓库列表
react-remove-scroll只把overflow写在body上；但本应用视口滚动条属于html（overflow-y: scroll），body 的 overflow 不会传播到视口，所以遮罩下层的页面依旧可以被滚动（滚动条拖拽 + 滚轮）。边栏内消息列表自带一条滚动条，加上仍然可用的视口滚动条，视觉上就是“两个滚动条”。index.css增加html:has(body[data-scroll-locked]) { overflow: hidden !important; }，在任意 Radix 模态打开期间直接锁住真正的根滚动容器。选用hidden而非clip：hidden 下视口仍是 scroll container，滚动偏移、position: sticky顶栏锚点与scrollbar-gutter: stable预留槽位在锁定期间全部保持不变，关闭后原位恢复。原有body[data-scroll-locked] { overflow: clip }规则保留（继续压制库内联写入的 body overflow，避免 body 变成 scroll container 导致 sticky 失锚）。验证
elementFromPoint命中 header 而非搜索框；header z-index 为 50data-scroll-locked生效、htmloverflow 为 hidden、滚动偏移保持、锁定前后clientWidth不变（无布局抖动）、在遮罩上滚轮无法滚动背景scroll、偏移保持、页面可继续滚动overflow: hidden下scrollbar-gutter: stable的槽位不会塌陷，无需额外补偿npm run typecheck、eslint、vitest（65 个文件 / 588 个用例）全部通过Summary by CodeRabbit
Bug 修复
样式