From 5956b1fd72ad293e4da3ea9c0a5287a13164241e Mon Sep 17 00:00:00 2001
From: Xavier <xaviersignup@gmail.com>
Date: Fri, 15 May 2026 12:37:04 -0700
Subject: [PATCH 1/2] Added experimental sticky attribute

---
 src/components/CodeEmbed/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
index 8087a47c37..8206b6ba8c 100644
--- a/src/components/CodeEmbed/index.jsx
+++ b/src/components/CodeEmbed/index.jsx
@@ -91,7 +91,7 @@ export const CodeEmbed = (props) => {
 
   return (
     <div
-      className={`my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
+      className={`sticky top-0 my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
     >
       {props.previewable ? (
         <div

From 1432d61ea22dafcaf3f405957eb57e10a12dd5a0 Mon Sep 17 00:00:00 2001
From: Xavier <xaviersignup@gmail.com>
Date: Fri, 15 May 2026 13:51:17 -0700
Subject: [PATCH 2/2] Sketch and play/stop buttons are now visible when
 scrolling

---
 src/components/CodeEmbed/index.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
index 8206b6ba8c..31326308d0 100644
--- a/src/components/CodeEmbed/index.jsx
+++ b/src/components/CodeEmbed/index.jsx
@@ -91,11 +91,11 @@ export const CodeEmbed = (props) => {
 
   return (
     <div
-      className={`sticky top-0 my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
+      className={`my-md flex w-full flex-col gap-[20px] overflow-y-auto max-h-screen ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
     >
       {props.previewable ? (
         <div
-          className={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : (props.allowSideBySide ? "" : "flex-col lg:flex-row")}`}
+          className={`sticky top-0 right-0 ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : (props.allowSideBySide ? "" : "flex-col lg:flex-row")}`}
         >
           <div>
             <CodeFrame
@@ -129,7 +129,7 @@ export const CodeEmbed = (props) => {
           </div>
         </div>
       ) : null}
-      <div className="code-editor-container relative w-full">
+      <div className="code-editor-container w-full">
         <CodeMirror
           value={codeString}
           theme="light"
@@ -155,7 +155,7 @@ export const CodeEmbed = (props) => {
             (editorView.contentDOM.ariaLabel = "Code Editor")
           }
         />
-        <div className="absolute right-0 top-0 flex flex-col gap-xs p-xs md:flex-row">
+        <div className="sticky absolute right-0 top-0 flex flex-col gap-xs p-xs md:flex-row">
           <CopyCodeButton textToCopy={codeString || initialCode} />
           <CircleButton
             onClick={() => {