Fix PageLayout horizontal overflow by constraining ContentWrapper width

[Copilot]

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

Content within PageLayout was expanding beyond component boundaries, causing horizontal overflow. The .ContentWrapper uses flex-basis: 0 with flex-grow: 1 but lacked an explicit width constraint, allowing children (wide tables, code blocks, long text) to ignore flex sizing.

Changes

Added width: 100% to .ContentWrapper in PageLayout.module.css. This constrains child content while preserving all flexbox behavior.

.ContentWrapper {
  display: flex;
  width: 100%;  /* Added */
  min-width: 1px;
  flex-direction: column;
  /* ... */
}

Changelog

Changed

• .ContentWrapper now explicitly constrains width to prevent horizontal overflow

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

CSS-only change, no API modifications. Backwards compatible. Includes changeset for automated version management.

Testing & Reviewing

All 17 PageLayout unit tests pass. Verify VRTs in CI, particularly:

• Pull Request Page layout
• Nested Scroll Container
• Resizable/Sticky panes with wide content

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

Description

We've seen a few visual regressions caused by content within a PageLayout expanding outside of the component's set width (causing horizontal overflow). This has been resolved by applying width: 100% to parts of the component, such as PageLayout.Content. We should investigate a long term solution that wouldn't require one-off fixes.

Task

• Upstream the applied fix (setting width: 100% on PageLayout.Content)
• Test the fix in integration to ensure no visual regressions on existing PageLayout implementations
• Investigate root cause and document cause/approach

References

• https://github.com/github/pull-requests/issues/22335
• https://github.com/github/pull-requests/issues/22225
• Slack thread in #ui

Related issue: https://github.com/github/primer/issues/6360

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0e56f75

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.

[TylerJDev]

@copilot, can you add a changeset (patch) and also run format (i.e. npm run format)

[Copilot]

@copilot, can you add a changeset (patch) and also run format (i.e. npm run format)

Done! Added changeset for patch release and ran formatter. Changes in commit 0fb14e8.

[TylerJDev]

@copilot, can you remove the PAGELAYOUT_OVERFLOW_FIX.md markdown file?

[Copilot]

@copilot, can you remove the PAGELAYOUT_OVERFLOW_FIX.md markdown file?

Done! Removed PAGELAYOUT_OVERFLOW_FIX.md in commit 0e56f75.

[primer-integration]

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

[Copilot]

Pull request overview

Fixes PageLayout horizontal overflow by ensuring the content region’s wrapper is explicitly constrained to the available width, preventing wide children from expanding layout bounds.

Changes:

• Add width: 100% to .ContentWrapper in PageLayout.module.css to constrain content sizing within flex layout.
• Add a changeset to ship the fix as a patch.
• Update package-lock.json to reflect @primer/react 38.9.0 references.

Reviewed changes

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

File	Description
packages/react/src/PageLayout/PageLayout.module.css	Constrains PageLayout.Content wrapper width to prevent horizontal overflow from wide children.
package-lock.json	Updates locked @primer/react version references to 38.9.0.
.changeset/fix-pagelayout-overflow.md	Declares a patch release for the overflow fix.

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Running
  Projects Passed

[siddharthkp]

No visual changes detected 🎉 https://github.com/github/github-ui/actions/runs/21647724679/job/62404317608?pr=12644