Refine drag/resize performance optimizations in PageLayout

[Copilot]

Removes ineffective CSS performance hints and adds conditional content-visibility optimizations based on element height.

Changes

Performance optimizations during drag:

• Removed will-change: width from pane (only benefits compositor properties like transform/opacity, not layout properties)
• Removed content-visibility from pane (always visible during drag, no benefit)
• Added conditional content-visibility to content area only when height > 1000px
• Changed containIntrinsicSize from hardcoded 500px to actual offsetHeight (prevents layout shift)

Implementation:

// Before: Applied to both pane and content unconditionally
pane?.style.setProperty('will-change', 'width')
setContainmentOptimizations(content)  // Used hardcoded 500px
setContainmentOptimizations(pane)

// After: Minimal containment for pane, conditional for content
if (pane) {
  pane.style.contain = 'layout style paint'
  pane.style.pointerEvents = 'none'
}

if (content) {
  content.style.contain = 'layout style paint'
  content.style.pointerEvents = 'none'
  
  const height = content.offsetHeight
  if (height > TALL_CONTENT_THRESHOLD) {
    content.style.contentVisibility = 'auto'
    content.style.containIntrinsicSize = `auto ${height}px`
  }
}

Changelog

Changed

• setDraggingStyles: Removed will-change: width from pane, simplified pane containment, added height-based content-visibility for content
• removeDraggingStyles: Updated to match new style application
• setContainmentOptimizations: Added 1000px height threshold before applying content-visibility

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

Performance optimization refinement with no API changes.

Testing & Reviewing

Tests verify:

• Containment properties applied to pane during drag (no will-change)
• content-visibility applied only to tall content (>1000px)
• content-visibility NOT applied to short content (<1000px)

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

Refine the drag/resize performance optimizations in paneUtils.ts based on analysis:

1. Remove will-change: width - This doesn't help for layout-triggering properties like width. It only benefits compositor-friendly properties like transform and opacity. May actually hurt performance by increasing memory usage.

2. Remove content-visibility from pane - The pane is always visible during drag, so content-visibility: auto provides no benefit and adds overhead.

3. Keep content-visibility for content area only - The content area may have significant off-screen content that benefits from skipping rendering.

4. Use actual height for containIntrinsicSize - Instead of hardcoded 500px, use element.offsetHeight for accurate size estimation (prevents layout shift). Only apply to tall content (>1000px threshold).

Changes to packages/react/src/PageLayout/paneUtils.ts

For Pane:

• Keep: contain: layout style paint
• Keep: pointer-events: none
• Remove: will-change: width
• Remove: content-visibility: auto
• Remove: containIntrinsicSize

For Content:

• Keep: contain: layout style paint
• Keep: pointer-events: none
• Keep: content-visibility: auto (but only if height > 1000px)
• Change: containIntrinsicSize from hardcoded 500px to actual offsetHeight

Updated code structure

const TALL_CONTENT_THRESHOLD = 1000 // px

/** Apply visual feedback and performance optimizations during drag */
export function setDraggingStyles({handle, pane, content}: DraggingStylesParams) {
  // Handle visual feedback
  handle?.style.setProperty('background-color', 'var(--bgColor-accent-emphasis)')
  handle?.style.setProperty('--draggable-handle--drag-opacity', '1')
  handle?.style.setProperty('--draggable-handle--transition', 'none')
  
  // Pane: minimal containment (always visible)
  if (pane) {
    pane.style.contain = 'layout style paint'
    pane.style.pointerEvents = 'none'
  }
  
  // Content: containment + conditional content-visibility for tall content
  if (content) {
    content.style.contain = 'layout style paint'
    content.style.pointerEvents = 'none'
    
    const height = content.offsetHeight
    if (height > TALL_CONTENT_THRESHOLD) {
      content.style.contentVisibility = 'auto'
      content.style.containIntrinsicSize = `auto ${height}px`
    }
  }
}

/** Remove drag styles and restore normal state */
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')
  
  if (pane) {
    pane.style.contain = ''
    pane.style.pointerEvents = ''
  }
  
  if (content) {
    content.style.contain = ''
    content.style.pointerEvents = ''
    content.style.contentVisibility = ''
    content.style.containIntrinsicSize = ''
  }
}

Also update or remove the setContainmentOptimizations and removeContainmentOptimizations helper functions since they're no longer needed in their current form.

Update tests

Update usePaneWidth.test.ts to reflect the new behavior:

• Tests checking for content-visibility on pane should be updated
• Tests should verify content-visibility is only applied to tall content areas

Rationale

Change	Why
Remove will-change: width	Only helps transform/opacity, not layout properties
Remove pane content-visibility	Pane is always visible during drag
Keep content content-visibility	Content area may have off-screen parts
Use actual height	Prevents layout shift from incorrect size guess
Height threshold (1000px)	Avoid overhead on small content

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: 873f524

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