From ecc4ae0b404561953f53e53602c851c225dab513 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 27 Mar 2026 19:56:13 +0000
Subject: [PATCH 1/2] Fix a bug in PageLayout that causes jumping when a pane
 is loaded async into the pane

---
 packages/react/src/PageLayout/PageLayout.module.css |  2 +-
 packages/react/src/PageLayout/PageLayout.tsx        | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 526fa6d8ee5..3318aa0b1bd 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -471,7 +471,7 @@
       display: none;
     }
 
-    width: auto;
+    width: var(--pane-width-size);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 97946a17f55..e2d90bed87e 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -868,6 +868,11 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             '--offset-header': typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
             '--spacing-row': `var(--spacing-${rowGap})`,
             '--spacing-column': `var(--spacing-${columnGap})`,
+            '--pane-min-width': isCustomWidthOptions(width) ? width.min : `${minWidth}px`,
+            '--pane-max-width': isCustomWidthOptions(width) ? width.max : `calc(100vw - var(--pane-max-width-diff))`,
+            '--pane-width-custom': isCustomWidthOptions(width) ? width.default : undefined,
+            '--pane-width-size': `var(--pane-width-${isPaneWidth(width) ? width : 'custom'})`,
+            '--pane-width': `${currentWidth}px`,
             ...style,
           } as React.CSSProperties
         }
@@ -900,11 +905,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           style={
             {
               '--spacing': `var(--spacing-${padding})`,
-              '--pane-min-width': isCustomWidthOptions(width) ? width.min : `${minWidth}px`,
-              '--pane-max-width': isCustomWidthOptions(width) ? width.max : `calc(100vw - var(--pane-max-width-diff))`,
-              '--pane-width-custom': isCustomWidthOptions(width) ? width.default : undefined,
-              '--pane-width-size': `var(--pane-width-${isPaneWidth(width) ? width : 'custom'})`,
-              '--pane-width': `${currentWidth}px`,
             } as React.CSSProperties
           }
         >

From c4ad237f5f20af87d520fe01d2bfd9f7ab5ab5a1 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 27 Mar 2026 20:31:23 +0000
Subject: [PATCH 2/2] Fix for when pane is first

---
 packages/react/src/PageLayout/PageLayout.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/PageLayout/PageLayout.module.css b/packages/react/src/PageLayout/PageLayout.module.css
index 3318aa0b1bd..bd9a13c2de7 100644
--- a/packages/react/src/PageLayout/PageLayout.module.css
+++ b/packages/react/src/PageLayout/PageLayout.module.css
@@ -471,7 +471,7 @@
       display: none;
     }
 
-    width: var(--pane-width-size);
+    width: var(--pane-width);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 
@@ -495,6 +495,7 @@
       margin-right: var(--spacing-column);
       flex-direction: row;
       order: var(--region-order-pane-start);
+      width: calc(var(--pane-width) + var(--spacing-column) + 1px);
     }
 
     &:where([data-position-regular='end']) {