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 <[email protected]>

Author: Copilot

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(
         <PageLayout>
           <PageLayout.Pane resizable>
@@ -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('')
     })

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)
 }