From 863109db3734d9db854493b34bc39f15b02a1083 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 12 Jan 2026 19:31:40 +0000 Subject: [PATCH 1/3] Initial plan From 0f20bec8904c685b50ddf5b8aca0914aecafd432 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 12 Jan 2026 19:40:37 +0000 Subject: [PATCH 2/3] Implement contain-intrinsic-size for drag stability Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com> --- .../react/src/PageLayout/PageLayout.test.tsx | 63 +++++++++++++++++++ packages/react/src/PageLayout/paneUtils.ts | 15 +++++ 2 files changed, 78 insertions(+) diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx index 52bc50c9874..937d7969f4c 100644 --- a/packages/react/src/PageLayout/PageLayout.test.tsx +++ b/packages/react/src/PageLayout/PageLayout.test.tsx @@ -259,6 +259,69 @@ describe('PageLayout', async () => { fireEvent.lostPointerCapture(divider, {pointerId: 1}) expect(pane!.style.willChange).toBe('') }) + + it('should set contain-intrinsic-size during pointer drag', async () => { + const {container} = render( + + + + + + + + , + ) + + const pane = container.querySelector('[class*="Pane"][data-resizable]') + const contentWrapper = container.querySelector('[class*="ContentWrapper"]') + const divider = await screen.findByRole('slider') + + // Before drag - no contain-intrinsic-size + expect(pane!.style.containIntrinsicSize).toBe('') + expect(contentWrapper!.style.containIntrinsicSize).toBe('') + + // Start drag - contain-intrinsic-size should be set + fireEvent.pointerDown(divider, {clientX: 300, clientY: 200, pointerId: 1}) + expect(pane!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + + // End drag - contain-intrinsic-size should be removed + fireEvent.lostPointerCapture(divider, {pointerId: 1}) + expect(pane!.style.containIntrinsicSize).toBe('') + expect(contentWrapper!.style.containIntrinsicSize).toBe('') + }) + + it('should set contain-intrinsic-size during keyboard resize', async () => { + const {container} = render( + + + + + + + + , + ) + + const pane = container.querySelector('[class*="Pane"][data-resizable]') + const contentWrapper = container.querySelector('[class*="ContentWrapper"]') + const divider = await screen.findByRole('slider') + + // Before interaction - no contain-intrinsic-size + expect(pane!.style.containIntrinsicSize).toBe('') + expect(contentWrapper!.style.containIntrinsicSize).toBe('') + + // Start keyboard resize + fireEvent.focus(divider) + fireEvent.keyDown(divider, {key: 'ArrowRight'}) + expect(pane!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + + // End keyboard resize - contain-intrinsic-size should be removed + fireEvent.keyUp(divider, {key: 'ArrowRight'}) + expect(pane!.style.containIntrinsicSize).toBe('') + expect(contentWrapper!.style.containIntrinsicSize).toBe('') + }) }) describe('PageLayout.Content', () => { diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index a33f8bbc010..8eeadd16048 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -15,6 +15,17 @@ export function setDraggingStyles({handle, pane, contentWrapper}: DraggingStyles handle?.style.setProperty('--draggable-handle--drag-opacity', '1') handle?.style.setProperty('--draggable-handle--transition', 'none') + // Capture current dimensions and set contain-intrinsic-size BEFORE setting data-dragging + // This ensures the element maintains its size when content-visibility: auto is applied + if (pane) { + const rect = pane.getBoundingClientRect() + pane.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`) + } + if (contentWrapper) { + const rect = contentWrapper.getBoundingClientRect() + contentWrapper.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`) + } + // Set attribute for CSS containment (O(1) direct selector, not descendant) pane?.setAttribute(DATA_DRAGGING_ATTR, 'true') contentWrapper?.setAttribute(DATA_DRAGGING_ATTR, 'true') @@ -28,4 +39,8 @@ export function removeDraggingStyles({handle, pane, contentWrapper}: DraggingSty pane?.removeAttribute(DATA_DRAGGING_ATTR) contentWrapper?.removeAttribute(DATA_DRAGGING_ATTR) + + // Remove contain-intrinsic-size after removing data-dragging + pane?.style.removeProperty('contain-intrinsic-size') + contentWrapper?.style.removeProperty('contain-intrinsic-size') } From 1d93cdb993125107f32d7041bb42ec5e1903e3be Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 12 Jan 2026 23:04:07 +0000 Subject: [PATCH 3/3] Use auto for contain-intrinsic-size to track actual width during drag Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com> --- packages/react/src/PageLayout/PageLayout.test.tsx | 12 ++++++------ packages/react/src/PageLayout/paneUtils.ts | 5 +++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx index 937d7969f4c..3f3155c0c42 100644 --- a/packages/react/src/PageLayout/PageLayout.test.tsx +++ b/packages/react/src/PageLayout/PageLayout.test.tsx @@ -280,10 +280,10 @@ describe('PageLayout', async () => { expect(pane!.style.containIntrinsicSize).toBe('') expect(contentWrapper!.style.containIntrinsicSize).toBe('') - // Start drag - contain-intrinsic-size should be set + // Start drag - contain-intrinsic-size should be set with auto keyword fireEvent.pointerDown(divider, {clientX: 300, clientY: 200, pointerId: 1}) - expect(pane!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) - expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + expect(pane!.style.containIntrinsicSize).toMatch(/^auto \d+(\.\d+)?px auto \d+(\.\d+)?px$/) + expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^auto \d+(\.\d+)?px auto \d+(\.\d+)?px$/) // End drag - contain-intrinsic-size should be removed fireEvent.lostPointerCapture(divider, {pointerId: 1}) @@ -311,11 +311,11 @@ describe('PageLayout', async () => { expect(pane!.style.containIntrinsicSize).toBe('') expect(contentWrapper!.style.containIntrinsicSize).toBe('') - // Start keyboard resize + // Start keyboard resize - should set with auto keyword fireEvent.focus(divider) fireEvent.keyDown(divider, {key: 'ArrowRight'}) - expect(pane!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) - expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^\d+(\.\d+)?px \d+(\.\d+)?px$/) + expect(pane!.style.containIntrinsicSize).toMatch(/^auto \d+(\.\d+)?px auto \d+(\.\d+)?px$/) + expect(contentWrapper!.style.containIntrinsicSize).toMatch(/^auto \d+(\.\d+)?px auto \d+(\.\d+)?px$/) // End keyboard resize - contain-intrinsic-size should be removed fireEvent.keyUp(divider, {key: 'ArrowRight'}) diff --git a/packages/react/src/PageLayout/paneUtils.ts b/packages/react/src/PageLayout/paneUtils.ts index 8eeadd16048..b812be58b35 100644 --- a/packages/react/src/PageLayout/paneUtils.ts +++ b/packages/react/src/PageLayout/paneUtils.ts @@ -17,13 +17,14 @@ export function setDraggingStyles({handle, pane, contentWrapper}: DraggingStyles // Capture current dimensions and set contain-intrinsic-size BEFORE setting data-dragging // This ensures the element maintains its size when content-visibility: auto is applied + // Use 'auto' for width since it changes during drag, allowing browser to track actual size if (pane) { const rect = pane.getBoundingClientRect() - pane.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`) + pane.style.setProperty('contain-intrinsic-size', `auto ${rect.width}px auto ${rect.height}px`) } if (contentWrapper) { const rect = contentWrapper.getBoundingClientRect() - contentWrapper.style.setProperty('contain-intrinsic-size', `${rect.width}px ${rect.height}px`) + contentWrapper.style.setProperty('contain-intrinsic-size', `auto ${rect.width}px auto ${rect.height}px`) } // Set attribute for CSS containment (O(1) direct selector, not descendant)