From 4cdfcce26ef60e15d6ca780dbfc268cdd0dc64b2 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Mon, 30 Dec 2024 17:50:08 +0000
Subject: [PATCH 1/3] fix(PageLayout): Remove unused width pabe value

---
 .changeset/forty-doors-visit.md                        |  5 +++++
 .../src/PageLayout/PageLayout.examples.stories.tsx     |  6 ++++++
 .../src/PageLayout/PageLayout.features.stories.tsx     | 10 +++++-----
 packages/react/src/PageLayout/PageLayout.module.css    |  6 +++++-
 packages/react/src/PageLayout/PageLayout.tsx           |  4 +++-
 5 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/forty-doors-visit.md

diff --git a/.changeset/forty-doors-visit.md b/.changeset/forty-doors-visit.md
new file mode 100644
index 00000000000..c1c32d9ed46
--- /dev/null
+++ b/.changeset/forty-doors-visit.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Fix responsive width of PageLayout
diff --git a/packages/react/src/PageLayout/PageLayout.examples.stories.tsx b/packages/react/src/PageLayout/PageLayout.examples.stories.tsx
index ddc160a543b..29f220c8548 100644
--- a/packages/react/src/PageLayout/PageLayout.examples.stories.tsx
+++ b/packages/react/src/PageLayout/PageLayout.examples.stories.tsx
@@ -61,6 +61,7 @@ export const ParentDetail: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -175,6 +176,7 @@ export const ParentDetailBreadcrumb: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -275,6 +277,7 @@ export const FilterBottomSheet: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -364,6 +367,7 @@ export const FilterActionMenu: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -627,6 +631,7 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -1118,6 +1123,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
diff --git a/packages/react/src/PageLayout/PageLayout.features.stories.tsx b/packages/react/src/PageLayout/PageLayout.features.stories.tsx
index b75b0a9f63d..346798c2565 100644
--- a/packages/react/src/PageLayout/PageLayout.features.stories.tsx
+++ b/packages/react/src/PageLayout/PageLayout.features.stories.tsx
@@ -58,7 +58,7 @@ export const PullRequestPage = () => (
         this overflows, it should not break to overall page layout!
       </Box>
     </PageLayout.Content>
-    <PageLayout.Pane>
+    <PageLayout.Pane aria-label="Side pane">
       <Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>
         <Box>
           <Text sx={{fontSize: 0, fontWeight: 'bold', display: 'block', color: 'fg.muted'}}>Assignees</Text>
@@ -310,7 +310,7 @@ export const ResizablePane: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="start">
+    <PageLayout.Pane resizable position="start" aria-label="Side pane">
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -329,7 +329,7 @@ export const ScrollContainerWithinPageLayoutPane: StoryFn = () => (
       <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
         <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
           <Box sx={{overflow: 'auto'}}>
-            <PageLayout.Pane padding="normal">
+            <PageLayout.Pane padding="normal" aria-label="Side pane">
               <Placeholder label="Inner scroll container" height={800} />
             </PageLayout.Pane>
           </Box>
@@ -350,7 +350,7 @@ export const CustomPaneWidths: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable width={{min: '200px', default: '300px', max: '400px'}}>
+    <PageLayout.Pane resizable width={{min: '200px', default: '300px', max: '400px'}} aria-label="Side pane">
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -367,7 +367,7 @@ export const WithCustomPaneHeading: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="start">
+    <PageLayout.Pane resizable position="start" aria-label="Side pane">
       <Heading as="h2" sx={{fontSize: 3}} id="pane-heading">
         Pane Heading
       </Heading>
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index ddc5400b2f3..29e1d7b2e61 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -27,6 +27,11 @@ body[data-page-layout-dragging='true'] * {
     --spacing-normal: var(--base-size-24);
   }
 
+/* 
+  small: ['100%', null, '240px', '256px'],
+  medium: ['100%', null, '256px', '296px'],
+  large: ['100%', null, '256px', '320px', '336px'], */
+
   /* Pane Width Values */
   --pane-width-small: 100%;
   --pane-width-medium: 100%;
@@ -46,7 +51,6 @@ body[data-page-layout-dragging='true'] * {
   }
 
   @media screen and (min-width: 1280px) {
-    --pane-width-large: 336px;
     --pane-max-width-diff: 959px;
   }
 
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index d4d3b18c30e..684f4404d6b 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -764,6 +764,8 @@ const paneWidths = {
 
 const defaultPaneWidth = {small: 256, medium: 296, large: 320}
 
+const overflowProps = {tabIndex: 0, role: 'region'}
+
 const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayoutPaneProps>>(
   (
     {
@@ -998,7 +1000,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         />
         <Box
           ref={paneRef}
-          {...(hasOverflow && {tabIndex: 0, role: 'region'})}
+          {...(hasOverflow ? overflowProps : {})}
           {...labelProp}
           {...(id && {id: paneId})}
           {...paneStylingProps}

From 18412e82d125083ca10a87779ea61a6ccbbed4ff Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Mon, 30 Dec 2024 17:52:15 +0000
Subject: [PATCH 2/3] remove unused value

---
 packages/react/src/PageLayout/PageLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 684f4404d6b..ee166fb5bce 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -759,7 +759,7 @@ const panePositions = {
 const paneWidths = {
   small: ['100%', null, '240px', '256px'],
   medium: ['100%', null, '256px', '296px'],
-  large: ['100%', null, '256px', '320px', '336px'],
+  large: ['100%', null, '256px', '320px'],
 }
 
 const defaultPaneWidth = {small: 256, medium: 296, large: 320}

From a3ef0fa6f6e5ff80d3c09aaf99e9b2a6f06c4108 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Mon, 30 Dec 2024 17:57:50 +0000
Subject: [PATCH 3/3] css

---
 packages/react/src/PageLayout/PageLayout.module.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 29e1d7b2e61..b9987f015e9 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -27,11 +27,6 @@ body[data-page-layout-dragging='true'] * {
     --spacing-normal: var(--base-size-24);
   }
 
-/* 
-  small: ['100%', null, '240px', '256px'],
-  medium: ['100%', null, '256px', '296px'],
-  large: ['100%', null, '256px', '320px', '336px'], */
-
   /* Pane Width Values */
   --pane-width-small: 100%;
   --pane-width-medium: 100%;