From a7542b8073b314a4b37698f9e065b2c738716400 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 15:21:54 +0000
Subject: [PATCH 1/5] Initial plan


From 280a5a8f89c7d704fffdebd8c4fb935aeecee302 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 15:45:46 +0000
Subject: [PATCH 2/5] Fix PageLayout horizontal overflow by adding width: 100%
 to ContentWrapper

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>
---
 package-lock.json                                   | 8 ++++----
 packages/react/src/PageLayout/PageLayout.module.css | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a079a41e5c6..cf670f5700d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,7 +81,7 @@
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
-        "@primer/react": "38.8.0",
+        "@primer/react": "38.9.0",
         "@primer/styled-react": "1.0.2",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
@@ -95,7 +95,7 @@
       "name": "example-nextjs",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/react": "38.8.0",
+        "@primer/react": "38.9.0",
         "@primer/styled-react": "1.0.2",
         "next": "^16.1.5",
         "react": "^19.2.0",
@@ -138,7 +138,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primer/octicons-react": "^19.21.0",
-        "@primer/react": "38.8.0",
+        "@primer/react": "38.9.0",
         "@primer/styled-react": "1.0.2",
         "clsx": "^2.1.1",
         "next": "^16.1.5",
@@ -26883,7 +26883,7 @@
     },
     "packages/react": {
       "name": "@primer/react",
-      "version": "38.8.0",
+      "version": "38.9.0",
       "license": "MIT",
       "dependencies": {
         "@github/mini-throttle": "^2.1.1",
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index c9533a179f4..5466fce1d67 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -346,6 +346,7 @@
 
 .ContentWrapper {
   display: flex;
+  width: 100%;
 
   /* Hack to prevent overflowing content from pushing the pane region to the next line */
   min-width: 1px;

From f40df61e9ea51271862403c91b9b9a7b017c42cc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 15:49:21 +0000
Subject: [PATCH 3/5] Add comprehensive documentation for PageLayout horizontal
 overflow fix

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>
---
 PAGELAYOUT_OVERFLOW_FIX.md | 138 +++++++++++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 PAGELAYOUT_OVERFLOW_FIX.md

diff --git a/PAGELAYOUT_OVERFLOW_FIX.md b/PAGELAYOUT_OVERFLOW_FIX.md
new file mode 100644
index 00000000000..6a0761e0260
--- /dev/null
+++ b/PAGELAYOUT_OVERFLOW_FIX.md
@@ -0,0 +1,138 @@
+# PageLayout Horizontal Overflow Fix - Documentation
+
+## Issue Summary
+
+Visual regressions were occurring in PageLayout where content expanded outside the component's set width, causing horizontal overflow. This was particularly problematic with:
+- Wide tables
+- Long unbroken text strings
+- Fixed-width content elements
+- Content that doesn't respect flexbox sizing
+
+## Root Cause Analysis
+
+The issue was in the `.ContentWrapper` CSS class in `packages/react/src/PageLayout/PageLayout.module.css`.
+
+### Original CSS Structure
+
+```css
+.ContentWrapper {
+  display: flex;
+  min-width: 1px;
+  flex-direction: column;
+  order: var(--region-order-content);
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+```
+
+### Problem
+
+The `.ContentWrapper` element uses flexbox with:
+- `flex-basis: 0` - Allows flex-grow to control the width
+- `flex-grow: 1` - Grows to fill available space
+- `flex-shrink: 1` - Can shrink if needed
+- `min-width: 1px` - Prevents overflow from pushing the pane region to the next line
+
+However, **it lacked an explicit `width: 100%` constraint**. This allowed child content to:
+1. Expand beyond the parent's intended width
+2. Ignore the flex container's sizing constraints
+3. Cause horizontal overflow when content had `min-width` or fixed widths exceeding available space
+
+### Why This Happened
+
+In flexbox layouts, when `flex-basis: 0` is set with `flex-grow: 1`, the element grows to fill space. However, without an explicit width constraint, children can still overflow if they have:
+- Intrinsic sizing (like images, tables, or iframes)
+- `min-width` values
+- Fixed widths that exceed the computed flex size
+- Content that doesn't wrap (like long URLs or code)
+
+## Solution
+
+Added `width: 100%` to `.ContentWrapper`:
+
+```css
+.ContentWrapper {
+  display: flex;
+  width: 100%;  /* ← NEW: Explicit width constraint */
+  min-width: 1px;
+  flex-direction: column;
+  order: var(--region-order-content);
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+```
+
+### Why This Works
+
+1. **Explicit Constraint**: `width: 100%` provides a clear maximum width that children must respect
+2. **Compatible with Flexbox**: Works alongside `flex-basis: 0` and `flex-grow: 1`
+3. **No Breaking Changes**: Doesn't affect existing layouts that already behave correctly
+4. **Prevents Overflow**: Forces children to constrain their width to the parent's computed size
+
+## Impact Assessment
+
+### Positive Effects
+- ✅ Prevents horizontal overflow in PageLayout.Content
+- ✅ Maintains existing layout behavior
+- ✅ Works with all current PageLayout features (sticky panes, resizable panes, dividers)
+- ✅ No changes needed to component API or usage
+
+### No Breaking Changes
+- The change is additive (adding a CSS property)
+- All flexbox properties remain intact
+- Existing content that already fits properly continues to work
+- The `min-width: 1px` hack for pane wrapping still functions
+
+## Testing
+
+### Unit Tests
+✅ All 17 PageLayout unit tests pass
+- Default layout rendering
+- Condensed layout
+- Divider variations
+- Responsive behavior
+- Hidden regions
+- Custom widths
+
+### Build Verification
+✅ TypeScript compilation succeeds
+✅ Rollup build completes without errors
+
+### Visual Regression Testing
+⏳ Should be verified in CI with Playwright VRT tests
+- Pull Request Page layout
+- Nested Scroll Container
+- Resizable Pane
+- Sticky Pane behavior
+
+## Files Changed
+
+1. **packages/react/src/PageLayout/PageLayout.module.css**
+   - Line 349: Added `width: 100%;` to `.ContentWrapper`
+
+## Related Issues & References
+
+- https://github.com/github/pull-requests/issues/22335
+- https://github.com/github/pull-requests/issues/22225
+- Slack thread in #ui: https://github.slack.com/archives/C0948TXP4UA/p1769176103252369
+- Related issue: https://github.com/github/primer/issues/6360
+
+## Future Considerations
+
+### Similar Patterns in Codebase
+Consider auditing other components for similar patterns where:
+- Flexbox is used with `flex-basis: 0` and `flex-grow: 1`
+- No explicit `width` constraint exists
+- Overflow issues have been reported
+
+### Best Practice
+When using flexbox with `flex-basis: 0` and `flex-grow: 1` for the main content area:
+1. Always include `width: 100%` to prevent child overflow
+2. Combine with `max-width: 100%` if needed for specific children
+3. Use `overflow-x: auto` on children that might overflow intentionally
+
+## Conclusion
+
+This is a minimal, surgical fix that addresses the root cause of horizontal overflow in PageLayout by adding a single CSS property. The change is backwards-compatible, doesn't break existing layouts, and prevents future overflow issues with wide content.

From 0fb14e87e536e55d935a4cd145f7e53dbc26237d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 19:22:52 +0000
Subject: [PATCH 4/5] Add changeset for patch release and format files

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>
---
 .changeset/fix-pagelayout-overflow.md |  5 +++++
 PAGELAYOUT_OVERFLOW_FIX.md            | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-pagelayout-overflow.md

diff --git a/.changeset/fix-pagelayout-overflow.md b/.changeset/fix-pagelayout-overflow.md
new file mode 100644
index 00000000000..2869a2c3f2d
--- /dev/null
+++ b/.changeset/fix-pagelayout-overflow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix PageLayout horizontal overflow by adding width constraint to ContentWrapper
diff --git a/PAGELAYOUT_OVERFLOW_FIX.md b/PAGELAYOUT_OVERFLOW_FIX.md
index 6a0761e0260..1164c5fb540 100644
--- a/PAGELAYOUT_OVERFLOW_FIX.md
+++ b/PAGELAYOUT_OVERFLOW_FIX.md
@@ -3,6 +3,7 @@
 ## Issue Summary
 
 Visual regressions were occurring in PageLayout where content expanded outside the component's set width, causing horizontal overflow. This was particularly problematic with:
+
 - Wide tables
 - Long unbroken text strings
 - Fixed-width content elements
@@ -29,12 +30,14 @@ The issue was in the `.ContentWrapper` CSS class in `packages/react/src/PageLayo
 ### Problem
 
 The `.ContentWrapper` element uses flexbox with:
+
 - `flex-basis: 0` - Allows flex-grow to control the width
 - `flex-grow: 1` - Grows to fill available space
 - `flex-shrink: 1` - Can shrink if needed
 - `min-width: 1px` - Prevents overflow from pushing the pane region to the next line
 
 However, **it lacked an explicit `width: 100%` constraint**. This allowed child content to:
+
 1. Expand beyond the parent's intended width
 2. Ignore the flex container's sizing constraints
 3. Cause horizontal overflow when content had `min-width` or fixed widths exceeding available space
@@ -42,6 +45,7 @@ However, **it lacked an explicit `width: 100%` constraint**. This allowed child
 ### Why This Happened
 
 In flexbox layouts, when `flex-basis: 0` is set with `flex-grow: 1`, the element grows to fill space. However, without an explicit width constraint, children can still overflow if they have:
+
 - Intrinsic sizing (like images, tables, or iframes)
 - `min-width` values
 - Fixed widths that exceed the computed flex size
@@ -54,7 +58,7 @@ Added `width: 100%` to `.ContentWrapper`:
 ```css
 .ContentWrapper {
   display: flex;
-  width: 100%;  /* ← NEW: Explicit width constraint */
+  width: 100%; /* ← NEW: Explicit width constraint */
   min-width: 1px;
   flex-direction: column;
   order: var(--region-order-content);
@@ -74,12 +78,14 @@ Added `width: 100%` to `.ContentWrapper`:
 ## Impact Assessment
 
 ### Positive Effects
+
 - ✅ Prevents horizontal overflow in PageLayout.Content
 - ✅ Maintains existing layout behavior
 - ✅ Works with all current PageLayout features (sticky panes, resizable panes, dividers)
 - ✅ No changes needed to component API or usage
 
 ### No Breaking Changes
+
 - The change is additive (adding a CSS property)
 - All flexbox properties remain intact
 - Existing content that already fits properly continues to work
@@ -88,7 +94,9 @@ Added `width: 100%` to `.ContentWrapper`:
 ## Testing
 
 ### Unit Tests
+
 ✅ All 17 PageLayout unit tests pass
+
 - Default layout rendering
 - Condensed layout
 - Divider variations
@@ -97,11 +105,14 @@ Added `width: 100%` to `.ContentWrapper`:
 - Custom widths
 
 ### Build Verification
+
 ✅ TypeScript compilation succeeds
 ✅ Rollup build completes without errors
 
 ### Visual Regression Testing
+
 ⏳ Should be verified in CI with Playwright VRT tests
+
 - Pull Request Page layout
 - Nested Scroll Container
 - Resizable Pane
@@ -122,13 +133,17 @@ Added `width: 100%` to `.ContentWrapper`:
 ## Future Considerations
 
 ### Similar Patterns in Codebase
+
 Consider auditing other components for similar patterns where:
+
 - Flexbox is used with `flex-basis: 0` and `flex-grow: 1`
 - No explicit `width` constraint exists
 - Overflow issues have been reported
 
 ### Best Practice
+
 When using flexbox with `flex-basis: 0` and `flex-grow: 1` for the main content area:
+
 1. Always include `width: 100%` to prevent child overflow
 2. Combine with `max-width: 100%` if needed for specific children
 3. Use `overflow-x: auto` on children that might overflow intentionally

From 0e56f753ce2c6f8834e7c711b6f190ceb00271a8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 3 Feb 2026 20:34:39 +0000
Subject: [PATCH 5/5] Remove PAGELAYOUT_OVERFLOW_FIX.md documentation file

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>
---
 PAGELAYOUT_OVERFLOW_FIX.md | 153 -------------------------------------
 1 file changed, 153 deletions(-)
 delete mode 100644 PAGELAYOUT_OVERFLOW_FIX.md

diff --git a/PAGELAYOUT_OVERFLOW_FIX.md b/PAGELAYOUT_OVERFLOW_FIX.md
deleted file mode 100644
index 1164c5fb540..00000000000
--- a/PAGELAYOUT_OVERFLOW_FIX.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# PageLayout Horizontal Overflow Fix - Documentation
-
-## Issue Summary
-
-Visual regressions were occurring in PageLayout where content expanded outside the component's set width, causing horizontal overflow. This was particularly problematic with:
-
-- Wide tables
-- Long unbroken text strings
-- Fixed-width content elements
-- Content that doesn't respect flexbox sizing
-
-## Root Cause Analysis
-
-The issue was in the `.ContentWrapper` CSS class in `packages/react/src/PageLayout/PageLayout.module.css`.
-
-### Original CSS Structure
-
-```css
-.ContentWrapper {
-  display: flex;
-  min-width: 1px;
-  flex-direction: column;
-  order: var(--region-order-content);
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-```
-
-### Problem
-
-The `.ContentWrapper` element uses flexbox with:
-
-- `flex-basis: 0` - Allows flex-grow to control the width
-- `flex-grow: 1` - Grows to fill available space
-- `flex-shrink: 1` - Can shrink if needed
-- `min-width: 1px` - Prevents overflow from pushing the pane region to the next line
-
-However, **it lacked an explicit `width: 100%` constraint**. This allowed child content to:
-
-1. Expand beyond the parent's intended width
-2. Ignore the flex container's sizing constraints
-3. Cause horizontal overflow when content had `min-width` or fixed widths exceeding available space
-
-### Why This Happened
-
-In flexbox layouts, when `flex-basis: 0` is set with `flex-grow: 1`, the element grows to fill space. However, without an explicit width constraint, children can still overflow if they have:
-
-- Intrinsic sizing (like images, tables, or iframes)
-- `min-width` values
-- Fixed widths that exceed the computed flex size
-- Content that doesn't wrap (like long URLs or code)
-
-## Solution
-
-Added `width: 100%` to `.ContentWrapper`:
-
-```css
-.ContentWrapper {
-  display: flex;
-  width: 100%; /* ← NEW: Explicit width constraint */
-  min-width: 1px;
-  flex-direction: column;
-  order: var(--region-order-content);
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-```
-
-### Why This Works
-
-1. **Explicit Constraint**: `width: 100%` provides a clear maximum width that children must respect
-2. **Compatible with Flexbox**: Works alongside `flex-basis: 0` and `flex-grow: 1`
-3. **No Breaking Changes**: Doesn't affect existing layouts that already behave correctly
-4. **Prevents Overflow**: Forces children to constrain their width to the parent's computed size
-
-## Impact Assessment
-
-### Positive Effects
-
-- ✅ Prevents horizontal overflow in PageLayout.Content
-- ✅ Maintains existing layout behavior
-- ✅ Works with all current PageLayout features (sticky panes, resizable panes, dividers)
-- ✅ No changes needed to component API or usage
-
-### No Breaking Changes
-
-- The change is additive (adding a CSS property)
-- All flexbox properties remain intact
-- Existing content that already fits properly continues to work
-- The `min-width: 1px` hack for pane wrapping still functions
-
-## Testing
-
-### Unit Tests
-
-✅ All 17 PageLayout unit tests pass
-
-- Default layout rendering
-- Condensed layout
-- Divider variations
-- Responsive behavior
-- Hidden regions
-- Custom widths
-
-### Build Verification
-
-✅ TypeScript compilation succeeds
-✅ Rollup build completes without errors
-
-### Visual Regression Testing
-
-⏳ Should be verified in CI with Playwright VRT tests
-
-- Pull Request Page layout
-- Nested Scroll Container
-- Resizable Pane
-- Sticky Pane behavior
-
-## Files Changed
-
-1. **packages/react/src/PageLayout/PageLayout.module.css**
-   - Line 349: Added `width: 100%;` to `.ContentWrapper`
-
-## Related Issues & References
-
-- https://github.com/github/pull-requests/issues/22335
-- https://github.com/github/pull-requests/issues/22225
-- Slack thread in #ui: https://github.slack.com/archives/C0948TXP4UA/p1769176103252369
-- Related issue: https://github.com/github/primer/issues/6360
-
-## Future Considerations
-
-### Similar Patterns in Codebase
-
-Consider auditing other components for similar patterns where:
-
-- Flexbox is used with `flex-basis: 0` and `flex-grow: 1`
-- No explicit `width` constraint exists
-- Overflow issues have been reported
-
-### Best Practice
-
-When using flexbox with `flex-basis: 0` and `flex-grow: 1` for the main content area:
-
-1. Always include `width: 100%` to prevent child overflow
-2. Combine with `max-width: 100%` if needed for specific children
-3. Use `overflow-x: auto` on children that might overflow intentionally
-
-## Conclusion
-
-This is a minimal, surgical fix that addresses the root cause of horizontal overflow in PageLayout by adding a single CSS property. The change is backwards-compatible, doesn't break existing layouts, and prevents future overflow issues with wide content.