From 41c0d335eeccbc68205a64ca6591b2ea814d41bf Mon Sep 17 00:00:00 2001
From: Minwook Shin <163576506+minwookshin@users.noreply.github.com>
Date: Wed, 30 Sep 2026 23:21:05 -0400
Subject: [PATCH 1/3] fix(PageLayout): apply sidebar padding

---
 .changeset/quiet-sidebars-breathe.md          |  5 +++
 .../src/PageLayout/PageLayout.module.css      |  2 ++
 .../react/src/PageLayout/PageLayout.test.tsx  | 34 +++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 .changeset/quiet-sidebars-breathe.md

diff --git a/.changeset/quiet-sidebars-breathe.md b/.changeset/quiet-sidebars-breathe.md
new file mode 100644
index 00000000000..282d3e2ce0b
--- /dev/null
+++ b/.changeset/quiet-sidebars-breathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Apply `PageLayout.Sidebar` padding independently of the parent layout's padding.
diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 526fa6d8ee5..d2ca689e1f2 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -840,6 +840,8 @@
 .Sidebar {
   width: var(--pane-width-size);
   height: 100%;
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--spacing);
   overflow: auto;
 
   &:where([data-resizable]) {
diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx
index ef943f56f9a..96ce47fcfa3 100644
--- a/packages/react/src/PageLayout/PageLayout.test.tsx
+++ b/packages/react/src/PageLayout/PageLayout.test.tsx
@@ -330,6 +330,40 @@ describe('PageLayout', async () => {
   })
 
   describe('PageLayout.Sidebar', () => {
+    it.each([
+      {padding: 'none', viewport: 1280, expected: '0px'},
+      {padding: 'condensed', viewport: 1280, expected: '16px'},
+      {padding: 'normal', viewport: 1280, expected: '24px'},
+      {padding: 'condensed', viewport: 375, expected: '16px'},
+      {padding: 'normal', viewport: 375, expected: '16px'},
+      {padding: 'normal', viewport: 800, expected: '16px'},
+    ] as const)('applies $padding padding at a $viewport px viewport', async ({padding, viewport, expected}) => {
+      await page.viewport(viewport, 800)
+      try {
+        const {rerender} = render(
+          <PageLayout padding="none">
+            <PageLayout.Sidebar padding={padding}>Sidebar</PageLayout.Sidebar>
+            <PageLayout.Content>Content</PageLayout.Content>
+          </PageLayout>,
+        )
+
+        expect(screen.getByText('Sidebar')).toHaveStyle({padding: expected})
+
+        rerender(
+          <PageLayout padding="normal">
+            <PageLayout.Sidebar padding={padding} position="end" resizable sticky>
+              Sidebar
+            </PageLayout.Sidebar>
+            <PageLayout.Content>Content</PageLayout.Content>
+          </PageLayout>,
+        )
+
+        expect(screen.getByText('Sidebar')).toHaveStyle({padding: expected})
+      } finally {
+        await page.viewport(1280, 800)
+      }
+    })
+
     it('SidebarWrapper should prevent shrinking', () => {
       const {container} = render(
         <PageLayout>

From ce6ccd5c30057e1c4bd9c820244323584fae46ab Mon Sep 17 00:00:00 2001
From: Minwook Shin <163576506+minwookshin@users.noreply.github.com>
Date: Wed, 7 Oct 2026 16:19:51 -0400
Subject: [PATCH 2/3] test: unmount sidebar before restoring viewport

---
 packages/react/src/PageLayout/PageLayout.test.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/PageLayout/PageLayout.test.tsx b/packages/react/src/PageLayout/PageLayout.test.tsx
index 96ce47fcfa3..1c20c10285d 100644
--- a/packages/react/src/PageLayout/PageLayout.test.tsx
+++ b/packages/react/src/PageLayout/PageLayout.test.tsx
@@ -339,14 +339,14 @@ describe('PageLayout', async () => {
       {padding: 'normal', viewport: 800, expected: '16px'},
     ] as const)('applies $padding padding at a $viewport px viewport', async ({padding, viewport, expected}) => {
       await page.viewport(viewport, 800)
-      try {
-        const {rerender} = render(
-          <PageLayout padding="none">
-            <PageLayout.Sidebar padding={padding}>Sidebar</PageLayout.Sidebar>
-            <PageLayout.Content>Content</PageLayout.Content>
-          </PageLayout>,
-        )
+      const {rerender, unmount} = render(
+        <PageLayout padding="none">
+          <PageLayout.Sidebar padding={padding}>Sidebar</PageLayout.Sidebar>
+          <PageLayout.Content>Content</PageLayout.Content>
+        </PageLayout>,
+      )
 
+      try {
         expect(screen.getByText('Sidebar')).toHaveStyle({padding: expected})
 
         rerender(
@@ -360,6 +360,7 @@ describe('PageLayout', async () => {
 
         expect(screen.getByText('Sidebar')).toHaveStyle({padding: expected})
       } finally {
+        unmount()
         await page.viewport(1280, 800)
       }
     })

From 78df2b1505905bfa325518fe1c9f72348a32b59c Mon Sep 17 00:00:00 2001
From: Minwook Shin <163576506+minwookshin@users.noreply.github.com>
Date: Fri, 9 Oct 2026 09:11:29 -0400
Subject: [PATCH 3/3] docs: clarify PageLayout changeset summary

---
 .changeset/quiet-sidebars-breathe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/quiet-sidebars-breathe.md b/.changeset/quiet-sidebars-breathe.md
index 282d3e2ce0b..5321ba4bc92 100644
--- a/.changeset/quiet-sidebars-breathe.md
+++ b/.changeset/quiet-sidebars-breathe.md
@@ -2,4 +2,4 @@
 '@primer/react': patch
 ---
 
-Apply `PageLayout.Sidebar` padding independently of the parent layout's padding.
+PageLayout: Apply sidebar padding independently of the parent layout's padding.