Switch to a CSS based solution for the PageLayout sticky pane

[hectahertz]

Closes https://github.com/github/primer/issues/5174

This change removes the useResizeObserver and useEffect hooks previously used to calculate and set the --sticky-pane-height CSS custom property.

Problem:
The constant recalculation and application of this style on scroll and resize events were triggering frequent and costly style recalculations (observed at 60ms+ per recalc). This significantly impacted page performance during scrolling near the top of the page. This is not even counting the React component re-render time.

Solution:
By replacing this JS code with a CSS based solution we eliminate the continuous style updates, thereby preventing the performance bottleneck caused by excessive style recalculations. The underlying layout or component manages the sticky pane's height without requiring this dynamic JavaScript-driven height adjustment.

This is a small compromise in UX that gets us big performance gains.

More context on the original implementation:
https://share.cleanshot.com/O9uSpc

Changelog

Changed

The only difference in behaviour happens on a very specific scenario:

• The pane doesn't fit in the viewport
• The pane is sticky
• The user hasn't scrolled past the header yet

Existing behavior:

• We can directly scroll to the bottom of the pane (This is what the JS code compensates for)

Screen.Recording.2025-05-20.at.16.30.03.mov

New behavior:

• To scroll to the bottom of the pane, we have to scroll past the header or attempt to scroll through the pane again, then the scroll interaction bubbles to the parent and we scroll past the header (see video)

Screen.Recording.2025-05-20.at.16.30.29.mov

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

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

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	Minor

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 depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	95.26 KB (-0.98% 🔽)
packages/react/dist/browser.umd.js	95.31 KB (-1.16% 🔽)

[Copilot]

Pull Request Overview

This PR replaces the JavaScript-driven sticky pane height calculation with a pure CSS-based solution, eliminating expensive scroll/resize listeners and dynamic style recalculations.

• Removed useStickyPaneHeight hook and all related context plumbing
• Updated PageLayout.module.css to use a fixed CSS max-height instead of a CSS variable
• Updated PageLayout.tsx to drop the obsolete props, refs, and effects

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/react/src/PageLayout/useStickyPaneHeight.ts	Deleted the JS hook that calculated pane height
packages/react/src/PageLayout/PageLayout.tsx	Removed hook import, context values, and effects
packages/react/src/PageLayout/PageLayout.module.css	Changed max-height to 100vh
.changeset/warm-seals-obey.md	Added changelog entry for CSS-based solution

[joshblack]

Changes LGTM! Just would want design to 👍 the UX changes. Is there a good way for us to test this in dotcom? Changes layout-wise terrify me lol

[hectahertz]

@joshblack Thanks for reviewing! Yes, we'll be review-labing this :)

@mperrotti This is what we reviewed together, does it look ok?