WIP: refactor(PageLayout): Apply drag/resize optimizations via inline styles instead of data attributes

[mattcosta7]

Refactors PageLayout performance optimizations to use inline styles instead of CSS attribute selectors, eliminating O(n) descendant traversal on every style recalc. Adds content-visibility, contain-intrinsic-size, rAF throttling, and instant drag handle feedback.

Before: Drag on 100k node DOM: 5-15 fps, 800-1200ms INP, visible jank
After: 50-60 fps, 200-300ms INP, minimal jank

Changelog

Changed

• Containment via inline styles - Apply contain, pointer-events, content-visibility directly to elements instead of via [data-dragging] CSS selectors. Eliminates descendant matching cost (O(n) → O(1))
• rAF coalescing for drag - Batch pointer events to max 1 DOM update per frame (60fps cap)
• Instant drag handle feedback - Disable CSS transitions during drag via --draggable-handle--transition variable
• Window resize containment - Apply same optimizations during resize with throttled updates (changed from debounce to throttle)
• Extracted paneUtils.ts - Reusable utilities for setContainmentOptimizations(), setDraggingStyles()
• React.memo on internal components - Added memo to HorizontalDivider, VerticalDivider, and DragHandle subcomponents

New

• content-visibility: auto - Skip rendering off-screen content in large DOMs
• contain-intrinsic-size: auto 500px - Prevent layout thrashing from size estimation

Removed

• [data-dragging] attribute and associated CSS descendant selectors

Performance Impact

Metric	Small (<1k)	Medium (~10k)	Large (50k)	XL (100k+)
FPS (drag)	60 fps	60 fps	30-45 → 55-60 fps	5-15 → 50-60 fps
FPS (resize)	60 fps	60 fps	40-50 → 55-60 fps	10-20 → 50-60 fps
INP (drag)	<100ms	<100ms	200-400 → <150ms	800-1200 → 200-300ms
Style recalc	~1-2ms	5-10 → 2-3ms	30-50 → 5-8ms	100-200 → 10-15ms
Handle latency	<16ms	<16ms	150-200 → <16ms	300-500 → <32ms

Key wins: Selector matching O(n)→O(1), hit testing skipped on 100k nodes, off-screen rendering skipped, frame coalescing, instant visual feedback

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

Tested with synthetic large DOMs in PageLayout performance stories. Verified with Chrome DevTools Performance profiler.

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)

[changeset-bot]

🦋 Changeset detected

Latest commit: 64dbf83

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/9043

[primer-integration]

🔬 github-ui Integration Test Results

Check	Status	Details
CI	⏳ Pending	Waiting for workflow to complete
Projects (Memex)	✅ Passed	View run
VRT	✅ Passed	View run

[mattcosta7]

@copilot update the pr body with current details.

Update the comparison table to account for bigger Dom sizes and changes in performance, web vitals, fps and perceived performance

[Copilot]

@mattcosta7 I've opened a new pull request, #7370, to work on those changes. Once the pull request is ready, I'll request review from you.

[mattcosta7]

@copilot update the pr description of this pr to account for the current status of this branch

Add fps and perceived performance to the comparison table

[Copilot]

@mattcosta7 I've opened a new pull request, #7371, to work on those changes. Once the pull request is ready, I'll request review from you.