Simplify PageLayout drag optimizations by removing height threshold

[Copilot]

Removes the TALL_CONTENT_THRESHOLD (1000px) and applies content-visibility: auto uniformly to both pane and content during drag operations. The threshold added unnecessary complexity—content-visibility: auto has negligible overhead when content is visible and both regions may contain off-screen content that benefits from the optimization.

Changelog

Changed

• setContainmentOptimizations() now always applies content-visibility: auto and uses actual offsetHeight for containIntrinsicSize
• setDraggingStyles() and removeDraggingStyles() now use helper functions for both pane and content instead of duplicating logic

Removed

• TALL_CONTENT_THRESHOLD constant
• Conditional logic for applying content-visibility based on element height
• Two tests validating threshold behavior (>1000px and <1000px cases)

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

The updated test should apply containment optimizations during drag now verifies that both pane and content receive content-visibility: auto and containIntrinsicSize based on actual element height during drag operations.

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

Simplify the drag optimizations in PR #7373 to the more performant approach:

1. Apply content-visibility: auto to both pane and content - no harm when content is visible, helps when scrolled
2. Use actual offsetHeight for containIntrinsicSize - prevents layout shift
3. Remove the 1000px threshold - unnecessary complexity, content-visibility: auto has negligible overhead
4. Remove will-change: width - already done, keep it removed

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

Replace the current complex implementation with:

/**
 * Apply CSS containment optimizations to isolate an element during resize/drag.
 * - contain: limits layout/paint recalc to this subtree
 * - content-visibility: skip rendering off-screen content
 * - contain-intrinsic-size: uses actual element height to prevent layout shift
 * - pointer-events: skip hit-testing large child trees
 */
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`
  element.style.pointerEvents = 'none'
}

/**
 * Remove CSS containment optimizations after resize/drag completes.
 */
export function removeContainmentOptimizations(element: HTMLElement | null) {
  if (!element) return
  element.style.contain = ''
  element.style.contentVisibility = ''
  element.style.containIntrinsicSize = ''
  element.style.pointerEvents = ''
}

type DraggingStylesParams = {
  handle: HTMLElement | null
  pane: HTMLElement | null
  content: HTMLElement | null
}

/** Apply visual feedback and performance optimizations during drag */
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')
  // No will-change: width - doesn't help layout properties
  setContainmentOptimizations(pane)
  setContainmentOptimizations(content)
}

/** 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')
  removeContainmentOptimizations(pane)
  removeContainmentOptimizations(content)
}

Update tests in PageLayout.test.tsx

Remove the height threshold tests and simplify to just verify:

• content-visibility: auto is applied to both pane and content during drag
• containIntrinsicSize uses actual element height
• All styles are removed after drag ends

Key changes from current PR #7373

Aspect	Current PR #7373	This Change
Pane content-visibility	❌ Not applied	✅ Applied
Content content-visibility	Conditional (>1000px)	✅ Always applied
containIntrinsicSize	Uses offsetHeight	✅ Uses offsetHeight
TALL_CONTENT_THRESHOLD	1000px constant	❌ Removed
Code complexity	More branches	Simpler

Rationale

• content-visibility: auto has negligible overhead when content is on-screen
• Both pane and content may have scrolled/off-screen content that benefits
• Simpler code = fewer branches = marginally faster
• Actual offsetHeight prevents layout shift (single read at drag start is acceptable)

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: d0c3991

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