From 0259ef235e63cfdb0997d68bed234bacc7e7ed26 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 26 Dec 2025 13:37:25 +0000 Subject: [PATCH 1/2] Initial plan From ef701703e5dc1dfc99aeab753b38c96e206eb896 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 26 Dec 2025 13:47:29 +0000 Subject: [PATCH 2/2] Remove will-change: width and use actual element height in paneUtils - Removed will-change: width from setDraggingStyles/removeDraggingStyles as it provides no benefit for layout properties - Updated containIntrinsicSize to use element.offsetHeight instead of hardcoded 500px to prevent layout shift - Updated test to verify will-change is no longer set during drag operations Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com> --- packages/react/src/PageLayout/PageLayout.test.tsx | 8 ++++---- packages/react/src/PageLayout/paneUtils.ts | 4 +--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx index 5d841b799de..3ffbc988038 100644 --- a/packages/react/src/PageLayout/PageLayout.test.tsx +++ b/packages/react/src/PageLayout/PageLayout.test.tsx @@ -234,7 +234,7 @@ describe('PageLayout', async () => { expect(content!.style.getPropertyValue('contain')).toBe('') }) - it('should add will-change during drag for optimized updates', async () => { + it('should not add will-change during drag', async () => { const {container} = render( @@ -252,10 +252,10 @@ describe('PageLayout', async () => { // Before drag - no will-change expect(pane!.style.willChange).toBe('') - // Start drag - will-change is added + // Start drag - will-change should still not be set (removed optimization) fireEvent.pointerDown(divider, {clientX: 300, clientY: 200, pointerId: 1}) - expect(pane!.style.willChange).toBe('width') - // End drag - will-change is removed + expect(pane!.style.willChange).toBe('') + // End drag - will-change remains unset fireEvent.lostPointerCapture(divider, {pointerId: 1}) expect(pane!.style.willChange).toBe('') }) diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index 4ac2ebca89b..b5e11a17d76 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -9,7 +9,7 @@ export function setContainmentOptimizations(element: HTMLElement | null) { if (!element) return element.style.contain = 'layout style paint' element.style.contentVisibility = 'auto' - element.style.containIntrinsicSize = 'auto 500px' + element.style.containIntrinsicSize = `auto ${element.offsetHeight}px` element.style.pointerEvents = 'none' } @@ -36,7 +36,6 @@ export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) handle?.style.setProperty('--draggable-handle--drag-opacity', '1') // Disable transition for instant visual feedback during drag handle?.style.setProperty('--draggable-handle--transition', 'none') - pane?.style.setProperty('will-change', 'width') setContainmentOptimizations(content) setContainmentOptimizations(pane) } @@ -46,7 +45,6 @@ export function removeDraggingStyles({handle, pane, content}: DraggingStylesPara handle?.style.removeProperty('background-color') handle?.style.removeProperty('--draggable-handle--drag-opacity') handle?.style.removeProperty('--draggable-handle--transition') - pane?.style.removeProperty('will-change') removeContainmentOptimizations(content) removeContainmentOptimizations(pane) }