fix(layout): 面板宿主裁剪视口边缘,收起的面板不再撑出文档双向滚动 (#277)
收起的面板以 transform: translate(102%) 滑出屏幕,但 transform 后的元素仍计入祖先滚动溢出区,导致整个页面可左右/上下拖拽。面板宿主 [data-dsh-panel-host] 是视口尺寸的 fixed 容器,补上 overflow: hidden 后裁剪点恰在视口边缘,开合滑入动画、内部滚动容器与 fixed 弹层均不受影响。e2e 增加回归断言:面板收起时文档 scrollWidth/Height 不得超出视口。
This commit is contained in:
@@ -175,6 +175,26 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
|
||||
const tabBar = sidebar.locator('[title]')
|
||||
await expect(tabBar.first()).toBeAttached({ timeout: 90_000 })
|
||||
|
||||
// Regression: with the panels still COLLAPSED, the document must not grow
|
||||
// beyond the viewport. Collapsed panels are slid off-screen with
|
||||
// `transform: translate(102%)`, and a transformed element still
|
||||
// contributes to its ancestors' scrollable overflow — unclipped, the
|
||||
// hidden panels extended the document's scroll area and the whole page
|
||||
// became draggable left-right and up-down. The panel host clips at the
|
||||
// viewport edge (overflow: hidden), so scrollWidth/scrollHeight must stay
|
||||
// within the viewport here. (Assert <= not == : a classic scrollbar
|
||||
// narrows clientWidth, so scrollWidth may sit slightly under innerWidth.)
|
||||
await expect
|
||||
.poll(
|
||||
() =>
|
||||
page.evaluate(() => ({
|
||||
overflowX: document.documentElement.scrollWidth <= window.innerWidth,
|
||||
overflowY: document.documentElement.scrollHeight <= window.innerHeight,
|
||||
})),
|
||||
{ timeout: 30_000 },
|
||||
)
|
||||
.toEqual({ overflowX: true, overflowY: true })
|
||||
|
||||
// openByDefault defaults OFF: a fresh session's panel starts collapsed.
|
||||
// Expand it through the toggle cluster before the layout push can apply.
|
||||
const expandButton = sidebar.getByRole('button', { name: 'Expand sidebar' })
|
||||
|
||||
Reference in New Issue
Block a user