From d659b583ddcd4ce90f79b700af02e88acb2e2664 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Thu, 12 Dec 2024 16:06:17 +0000
Subject: [PATCH] Border layout sticky example update (#4485)

---
 site/docs/components/border-layout/examples.mdx          | 2 +-
 .../examples/border-layout/StickyPositioning.module.css  | 2 --
 site/src/examples/border-layout/StickyPositioning.tsx    | 9 +++++----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/site/docs/components/border-layout/examples.mdx b/site/docs/components/border-layout/examples.mdx
index 8decf837f6f..c542afadd1e 100644
--- a/site/docs/components/border-layout/examples.mdx
+++ b/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>
 
diff --git a/site/src/examples/border-layout/StickyPositioning.module.css b/site/src/examples/border-layout/StickyPositioning.module.css
index 359b1bab19e..80530acc0dd 100644
--- a/site/src/examples/border-layout/StickyPositioning.module.css
+++ b/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;
 }
diff --git a/site/src/examples/border-layout/StickyPositioning.tsx b/site/src/examples/border-layout/StickyPositioning.tsx
index 84df4a33082..a66279c17e6 100644
--- a/site/src/examples/border-layout/StickyPositioning.tsx
+++ b/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>