Remove will-change: width and use actual element height in PageLayout drag optimizations

[Copilot]

Removes ineffective will-change: width optimization and fixes layout shift from hardcoded size estimation in PageLayout drag operations.

Changes

paneUtils.ts:

• Removed will-change: width from drag styles—provides no benefit for layout properties, only increases memory
• Changed containIntrinsicSize from hardcoded 500px to actual element.offsetHeight to prevent layout shift with content-visibility: auto

PageLayout.test.tsx:

• Updated test to verify will-change is no longer applied during drag operations

Changelog

Changed

• PageLayout.Pane: Removed will-change: width during resize/drag operations
• PageLayout.Pane: containIntrinsicSize now uses actual element height instead of hardcoded 500px

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Test resizable panes in PageLayout stories—drag behavior should be unchanged, but more efficient.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Original prompt

Summary

Two small fixes to paneUtils.ts drag optimizations:

1. Remove will-change: width - This property only benefits compositor-friendly properties like transform and opacity. For layout-triggering properties like width, it provides no benefit and may increase memory usage.

2. Use actual element height for containIntrinsicSize - Instead of hardcoded 500px, use element.offsetHeight for accurate size estimation. This prevents layout shift when content-visibility: auto is applied.

File to modify

packages/react/src/PageLayout/paneUtils.ts

Changes

export function setContainmentOptimizations(element: HTMLElement | null) {
  if (!element) return
  element.style.contain = 'layout style paint'
  element.style.contentVisibility = 'auto'
  element.style.containIntrinsicSize = `auto ${element.offsetHeight}px`  // Use actual height
  element.style.pointerEvents = 'none'
}

export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) {
  handle?.style.setProperty('background-color', 'var(--bgColor-accent-emphasis)')
  handle?.style.setProperty('--draggable-handle--drag-opacity', '1')
  handle?.style.setProperty('--draggable-handle--transition', 'none')
  // Remove: pane?.style.setProperty('will-change', 'width')
  setContainmentOptimizations(content)
  setContainmentOptimizations(pane)
}

export function removeDraggingStyles({handle, pane, content}: DraggingStylesParams) {
  handle?.style.removeProperty('background-color')
  handle?.style.removeProperty('--draggable-handle--drag-opacity')
  handle?.style.removeProperty('--draggable-handle--transition')
  // Remove: pane?.style.removeProperty('will-change')
  removeContainmentOptimizations(content)
  removeContainmentOptimizations(pane)
}

Rationale

Change	Reason
Remove will-change: width	Only helps transform/opacity, not layout properties. May hurt performance.
Use element.offsetHeight	Prevents layout shift from incorrect size guess. Single read at drag start is acceptable cost.
Keep content-visibility on both	No harm if content is on-screen; helps if content is scrolled/off-screen.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: ef70170

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR