Border layout sticky example update (#4485)

site/docs/components/border-layout/examples.mdx

@@ -70,7 +70,7 @@ Use the `verticalAlignment` and `horizontalAlignment` properties of the border i
 
 Use the `sticky` prop of the border item wrapper to define a region as sticky. When you set it to `true`, content in surrounding regions will scroll beneath a `sticky` Border Item.
 
-This is particularly useful if you require a header, (in the North region) or side navigation (in the West region) to remain visible at all times.
+This is particularly useful if you require a region to remain visible at all times. For more information, see [CSS `position: sticky`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky).
 
 </LivePreview>
 

site/src/examples/border-layout/StickyPositioning.module.css

@@ -1,11 +1,9 @@
 .borderLayout {
-  height: 200px;
   width: 260px;
 }
 
 .center {
   flex-direction: column;
-  overflow: auto;
   justify-content: unset;
   text-align: center;
 }

site/src/examples/border-layout/StickyPositioning.tsx

@@ -5,16 +5,17 @@ import stickyPositioningStyles from "./StickyPositioning.module.css";
 import styles from "./index.module.css";
 
 export const StickyPositioning = (): ReactElement => (
-  <BorderLayout className={stickyPositioningStyles.borderLayout}>
+  <BorderLayout
+    className={stickyPositioningStyles.borderLayout}
+    style={{ height: "200px" }}
+  >
     <BorderItem position="north" sticky className={styles.borderItem}>
       North
     </BorderItem>
-    <BorderItem position="west" className={styles.borderItem}>
-      West
-    </BorderItem>
     <BorderItem
       position="center"
       className={clsx(styles.borderItem, stickyPositioningStyles.center)}
+      style={{ overflow: "auto" }}
     >
       <p>Center</p>
       <p>