PageLayout: move pane resize viewport clamping to CSS

[Copilot]

Fast window resizes were still running JS on every resize tick to keep --pane-max-width in sync, which made PageLayout pane/sidebar updates lag behind the viewport. This change moves the visual clamp into CSS and reduces JS resize work to a single trailing sync for ARIA/state parity.

Changelog

New

• PageLayout derives viewport-aware pane ceilings in CSS:
  • --pane-viewport-max
  • --sidebar-viewport-max
  • --page-layout-viewport-width (100dvw when supported, fallback to 100vw)
• Resizable pane/sidebar elements now opt into explicit viewport-clamp behavior via data-constrain-to-viewport when needed.

Changed

• CSS-first visual clamp

  • .Pane[data-resizable] and .Sidebar[data-resizable] now use CSS clamp()/min()/max() for viewport-dependent max width.
  • The existing breakpoint-driven --pane-max-width-diff switch at 1280px remains the source of truth.
  • Sidebar continues to use the constant --sidebar-max-width-diff path.

• Trailing-only JS resize sync

  • Removed the resize throttle/rAF loop and resize-time data-dragging toggling.
  • Window resize now does one debounced sync after the gesture ends to:
    • recompute maxPaneWidth
    • clamp currentWidth if needed
    • update ARIA slider values
    • commit React state once via startTransition

• Static-ish authored width variables

  • --pane-max-width is now written as:
    • explicit custom max for custom widths
    • viewport sentinel for preset widths
  • --pane-width and --pane-min-width behavior stays aligned with the existing drag/persistence code path.

• Behavioral parity

  • Preserves custom min/default/max width handling
  • Preserves constrainToViewport behavior for Sidebar
  • Preserves SSR seeding via SSR_DEFAULT_MAX_WIDTH
  • Keeps drag-handle logic unchanged
  • Updates hook tests to assert trailing-only resize behavior instead of per-tick JS writes

.Pane[data-resizable] {
  width: clamp(
    var(--pane-min-width),
    var(--pane-width),
    min(var(--pane-max-width), var(--pane-viewport-max))
  );
}

Removed

• Per-frame JS writes of --pane-max-width during window resize
• Throttle/rAF resize infrastructure in usePaneWidth
• Window-resize-specific containment toggling (data-dragging) in the hook

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

• Review PageLayout.module.css and usePaneWidth.ts together; the viewport clamp formula now exists in CSS while JS remains responsible for the final post-resize sync.
• Focus review on these cases:
  • preset widths vs custom min/default/max
  • Pane custom max with constrainToViewport=false
  • Sidebar custom max with constrainToViewport=true
  • breakpoint flip at 1280px
  • post-resize ARIA/state sync after debounce

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-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0623106

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]

⚠️ Action required

👋 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. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer-integration]

⚠️ Hi from github/github-ui! The integration workflow could not find a canary version for the latest commit on this PR.

A successful canary CI run (i.e., a valid canary version published via the release.yml workflow) must exist for the latest commit before integration checks will succeed.

Next steps:

1. Make sure the Canary Release label is applied to the PR — the release.yml workflow requires this label to publish a canary version.
2. Wait for the release.yml canary CI run to complete successfully for the latest commit on this PR.
3. Once a valid canary version exists, re-trigger the integration workflow by visiting the primer-react-pr-test workflow page, clicking Run workflow, and pasting this PR's URL.

For more details, see this workflow run.