PageLayout: Fix layout shift for divider=line

.changeset/popular-elephants-speak.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+PageLayout: Fix layout shift for divider=line

src/PageLayout/PageLayout.tsx

@@ -130,15 +130,14 @@ type DividerProps = {
 
 const horizontalDividerVariants = {
   none: {
-    display: 'none',
+    height: 1,
+    backgroundColor: 'transparent',
   },
   line: {
-    display: 'block',
     height: 1,
     backgroundColor: 'border.default',
   },
   filled: {
-    display: 'block',
     height: 8,
     backgroundColor: 'canvas.inset',
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -181,15 +180,14 @@ const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({var
 
 const verticalDividerVariants = {
   none: {
-    display: 'none',
+    width: 1,
+    backgroundColor: 'transparent',
   },
   line: {
-    display: 'block',
     width: 1,
     backgroundColor: 'border.default',
   },
   filled: {
-    display: 'block',
     width: 8,
     backgroundColor: 'canvas.inset',
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

@@ -30,7 +30,8 @@ exports[`PageLayout renders condensed layout 1`] = `
 .c4 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-top: 16px;
 }
 
@@ -104,7 +105,8 @@ exports[`PageLayout renders condensed layout 1`] = `
 .c9 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-bottom: 16px;
 }
 
@@ -119,7 +121,8 @@ exports[`PageLayout renders condensed layout 1`] = `
 .c11 {
   height: 100%;
   position: relative;
-  display: none;
+  width: 1px;
+  background-color: transparent;
   margin-right: 16px;
 }
 
@@ -282,7 +285,8 @@ exports[`PageLayout renders default layout 1`] = `
 .c4 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-top: 16px;
 }
 
@@ -356,7 +360,8 @@ exports[`PageLayout renders default layout 1`] = `
 .c9 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-bottom: 16px;
 }
 
@@ -371,7 +376,8 @@ exports[`PageLayout renders default layout 1`] = `
 .c11 {
   height: 100%;
   position: relative;
-  display: none;
+  width: 1px;
+  background-color: transparent;
   margin-right: 16px;
 }
 
@@ -624,7 +630,8 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 .c4 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-top: 16px;
 }
 
@@ -698,7 +705,8 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 .c9 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-bottom: 16px;
 }
 
@@ -713,7 +721,8 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 .c11 {
   height: 100%;
   position: relative;
-  display: none;
+  width: 1px;
+  background-color: transparent;
   margin-right: 16px;
 }
 
@@ -966,7 +975,8 @@ exports[`PageLayout renders with dividers 1`] = `
 .c4 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-top: 16px;
 }
 
@@ -1048,7 +1058,8 @@ exports[`PageLayout renders with dividers 1`] = `
 .c10 {
   height: 100%;
   position: relative;
-  display: none;
+  width: 1px;
+  background-color: transparent;
   margin-left: 16px;
 }
 
@@ -1063,7 +1074,8 @@ exports[`PageLayout renders with dividers 1`] = `
 .c12 {
   margin-left: -16px;
   margin-right: -16px;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-bottom: 16px;
 }
 

src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap

@@ -30,7 +30,6 @@ exports[`SplitPageLayout renders default layout 1`] = `
 .c4 {
   margin-left: 0;
   margin-right: 0;
-  display: block;
   height: 1px;
   background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   margin-top: 0;
@@ -106,7 +105,8 @@ exports[`SplitPageLayout renders default layout 1`] = `
 .c9 {
   margin-left: 0;
   margin-right: 0;
-  display: none;
+  height: 1px;
+  background-color: transparent;
   margin-top: 0;
 }
 
@@ -121,7 +121,8 @@ exports[`SplitPageLayout renders default layout 1`] = `
 .c11 {
   height: 100%;
   position: relative;
-  display: none;
+  width: 1px;
+  background-color: transparent;
   margin-left: 0;
 }
 
@@ -136,7 +137,6 @@ exports[`SplitPageLayout renders default layout 1`] = `
 .c13 {
   margin-left: 0;
   margin-right: 0;
-  display: block;
   height: 1px;
   background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
   margin-bottom: 0;