From 34df5db4cb49c6105ff4c06828db6a4e6527bada Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 23 Jun 2026 10:47:38 -0700
Subject: [PATCH 01/13] [editor-preview-scroll] poc

---
 .../perseus-editor/src/styles/perseus-editor.css    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 7cde51160b7..873e37e44ac 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -271,10 +271,12 @@ code {
     table-layout: fixed;
 }
 .perseus-editor-row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
 }
 .perseus-editor-left-cell {
-    display: table-cell;
+    display: flex;
+    flex-direction: column;
     padding-right: 30px;
     vertical-align: top;
     width: 360px;
@@ -282,13 +284,18 @@ code {
     min-width: 360px;
     position: relative;
     z-index: 10;
+    max-height: 90vh;
+    overflow-y: auto;
 }
 .perseus-editor-right-cell {
     box-sizing: border-box;
-    display: table-cell;
+    display: flex;
+    flex-direction: column;
     padding: 30px;
     padding-top: 5px;
     vertical-align: top;
+    max-height: 90vh;
+    overflow-y: auto;
 }
 .perseus-hint-editor {
     padding-bottom: 20px;

From 35cad340cfb20ee6bbfc779de68b9d6d18eef8c3 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 23 Jun 2026 11:06:11 -0700
Subject: [PATCH 02/13] [editor-preview-scroll] remove nested scroll bars

---
 packages/perseus-editor/src/components/device-framer.tsx | 2 --
 .../src/testing/preview/exercise-preview-page.tsx        | 9 +++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/perseus-editor/src/components/device-framer.tsx b/packages/perseus-editor/src/components/device-framer.tsx
index 71943c701a7..ce18f18ec1c 100644
--- a/packages/perseus-editor/src/components/device-framer.tsx
+++ b/packages/perseus-editor/src/components/device-framer.tsx
@@ -48,7 +48,6 @@ const DeviceFramer = ({
     const withChromeStyle = React.useMemo(
         () => ({
             backgroundColor: "white",
-            overflow: "scroll",
             color: "black",
             textAlign: "left",
             width: SCREEN_SIZES[deviceType].width,
@@ -69,7 +68,6 @@ const DeviceFramer = ({
             <div
                 key="screen"
                 style={{
-                    overflow: "scroll",
                     width:
                         SCREEN_SIZES[deviceType].framedWidth +
                         2 * perseusFrameBorderWidth +
diff --git a/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx b/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
index 6ec27994113..fc74d350cad 100644
--- a/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
+++ b/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
@@ -21,6 +21,15 @@ const ExercisePreviewPage = () => {
     const [iframeId, setIframeId] = React.useState<string | null>(null);
     const containerRef = React.useRef<HTMLDivElement>(null);
 
+    // Set the overflow to hidden on the body within the iframe
+    // to prevent nested scrollbars from appearing.
+    React.useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "auto";
+        };
+    }, []);
+
     // Read iframe configuration from dataset attributes
     React.useEffect(() => {
         // eslint-disable-next-line no-restricted-syntax

From 44e5544e3cc0af3c73d0f1eb11d7396ac579abc3 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Fri, 26 Jun 2026 16:47:50 -0700
Subject: [PATCH 03/13] [editor-preview-scroll] comments

---
 packages/perseus-editor/src/styles/perseus-editor.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 873e37e44ac..311e17e4f35 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -284,8 +284,10 @@ code {
     min-width: 360px;
     position: relative;
     z-index: 10;
-    max-height: 90vh;
+    /* Make the left cell scrollable. */
     overflow-y: auto;
+    /* Keep the left cell scroll area within the viewport. */
+    max-height: 90vh;
 }
 .perseus-editor-right-cell {
     box-sizing: border-box;
@@ -294,8 +296,10 @@ code {
     padding: 30px;
     padding-top: 5px;
     vertical-align: top;
-    max-height: 90vh;
+    /* Make the right cell scrollable. */
     overflow-y: auto;
+    /* Keep the right cell scroll area within the viewport. */
+    max-height: 90vh;
 }
 .perseus-hint-editor {
     padding-bottom: 20px;

From 0aebe50a2c55622f29163d85e5fd7794e46c9523 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Fri, 26 Jun 2026 16:48:15 -0700
Subject: [PATCH 04/13] [editor-preview-scroll] docs(changeset): Put the left
 and right sides of the editor in separate scroll areas.

---
 .changeset/few-carrots-mate.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/few-carrots-mate.md

diff --git a/.changeset/few-carrots-mate.md b/.changeset/few-carrots-mate.md
new file mode 100644
index 00000000000..3590b51c080
--- /dev/null
+++ b/.changeset/few-carrots-mate.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Put the left and right sides of the editor in separate scroll areas

From daec79f225783975d29085833659ddf49ff95bf4 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Fri, 26 Jun 2026 17:08:07 -0700
Subject: [PATCH 05/13] [editor-preview-scroll] Apply the scroll behavior
 within the article editor too

---
 packages/perseus-editor/src/article-editor.tsx     | 14 +++++++-------
 .../perseus-editor/src/styles/perseus-editor.css   |  5 ++++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/perseus-editor/src/article-editor.tsx b/packages/perseus-editor/src/article-editor.tsx
index 2ddd32b4110..27cb4954fa7 100644
--- a/packages/perseus-editor/src/article-editor.tsx
+++ b/packages/perseus-editor/src/article-editor.tsx
@@ -215,8 +215,8 @@ export default class ArticleEditor extends React.Component<Props, State> {
                 {sections.map((section, i) => {
                     return [
                         <div className="perseus-editor-row" key={i}>
-                            <fieldset disabled={editingDisabled}>
-                                <div className="perseus-editor-left-cell">
+                            <div className="perseus-editor-left-cell">
+                                <fieldset disabled={editingDisabled}>
                                     <IssuesPanel
                                         issues={this.state.issues[i]}
                                     />
@@ -297,12 +297,12 @@ export default class ArticleEditor extends React.Component<Props, State> {
                                         placeholder="Type your section text here..."
                                         ref={"editor" + i}
                                     />
-                                </div>
+                                </fieldset>
+                            </div>
 
-                                <div className="editor-preview">
-                                    {this._renderIframePreview(i, true)}
-                                </div>
-                            </fieldset>
+                            <div className="editor-preview">
+                                {this._renderIframePreview(i, true)}
+                            </div>
                         </div>,
                     ];
                 })}
diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 311e17e4f35..5239cb613ae 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -374,7 +374,10 @@ code {
     padding: 32px 20px;
 }
 .perseus-article-editor .editor-preview {
-    display: table-cell;
+    /* Make the preview scrollable. */
+    overflow-y: auto;
+    /* Keep the preview scroll area within the viewport. */
+    max-height: 90vh;
 }
 .perseus-article-editor .editor-preview.full-width {
     width: 100%;

From 9f97211af8008725e85bccb61674844a24ec1496 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Fri, 26 Jun 2026 17:15:44 -0700
Subject: [PATCH 06/13] [editor-preview-scroll] remove padding on the left side
 to make it look more like the original width

---
 packages/perseus-editor/src/styles/perseus-editor.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 5239cb613ae..f610420175b 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -277,7 +277,6 @@ code {
 .perseus-editor-left-cell {
     display: flex;
     flex-direction: column;
-    padding-right: 30px;
     vertical-align: top;
     width: 360px;
     max-width: 360px;

From 86a0c749b6bc975e880cf3cf90e1cc0bc685dc90 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 30 Jun 2026 13:48:16 -0700
Subject: [PATCH 07/13] [editor-preview-scroll] remove display table

---
 packages/perseus-editor/src/styles/perseus-editor.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index f610420175b..3c00665b615 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -267,7 +267,6 @@ code {
 }
 .perseus-editor-table {
     clear: both;
-    display: table;
     table-layout: fixed;
 }
 .perseus-editor-row {

From e92260fc0a9ff094ff564bdd66a9aa796933ac3d Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 30 Jun 2026 13:59:50 -0700
Subject: [PATCH 08/13] [editor-preview-scroll] update table styles

---
 packages/perseus-editor/src/styles/perseus-editor.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 3c00665b615..5e94675b96e 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -265,10 +265,6 @@ code {
     z-index: 3;
     /* interactive-content */
 }
-.perseus-editor-table {
-    clear: both;
-    table-layout: fixed;
-}
 .perseus-editor-row {
     display: flex;
     flex-direction: row;
@@ -339,10 +335,6 @@ code {
     margin-bottom: 20px;
     margin-top: 20px;
 }
-.perseus-article-editor .perseus-editor-table {
-    margin-left: auto;
-    margin-right: auto;
-}
 .perseus-article-editor .perseus-single-editor {
     margin-bottom: 10px;
 }

From 734ebef59efe41916675e6dc0ece1e902be2acab Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 30 Jun 2026 14:36:53 -0700
Subject: [PATCH 09/13] [editor-preview-scroll] snapshots

---
 .../article-editor.test.tsx.snap              | 44 +++++++++----------
 .../__snapshots__/editor-page.test.tsx.snap   |  2 +-
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap b/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
index b6350b42942..e96e2b4c042 100644
--- a/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
+++ b/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
@@ -11,11 +11,11 @@ exports[`ArticleEditor should match snapshot for editing disabled for all widget
       <div
         class="perseus-editor-row"
       >
-        <fieldset
-          disabled=""
+        <div
+          class="perseus-editor-left-cell"
         >
-          <div
-            class="perseus-editor-left-cell"
+          <fieldset
+            disabled=""
           >
             <div
               class="perseus-widget-editor"
@@ -15445,30 +15445,30 @@ table: [[☃ table 1]]
                 </div>
               </div>
             </div>
-          </div>
+          </fieldset>
+        </div>
+        <div
+          class="editor-preview"
+        >
           <div
-            class="editor-preview"
+            style="width: 726px;"
           >
-            <div
-              style="overflow: scroll; width: 726px;"
-            >
-              <div>
-                <div
+            <div>
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <iframe
+                  data-id="3"
+                  data-lint-gutter="true"
+                  data-mobile="false"
+                  data-name="content-preview"
+                  src="https://www.example.com"
                   style="width: 100%; height: 100%;"
-                >
-                  <iframe
-                    data-id="3"
-                    data-lint-gutter="true"
-                    data-mobile="false"
-                    data-name="content-preview"
-                    src="https://www.example.com"
-                    style="width: 100%; height: 100%;"
-                  />
-                </div>
+                />
               </div>
             </div>
           </div>
-        </fieldset>
+        </div>
       </div>
       <div
         class="perseus-editor-row"
diff --git a/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap b/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
index 08839721df7..bdfb083eca5 100644
--- a/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
+++ b/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
@@ -15509,7 +15509,7 @@ table: [[☃ table 1]]
             id="problemarea"
           >
             <div
-              style="overflow: scroll; width: 726px;"
+              style="width: 726px;"
             >
               <div>
                 <div

From fc7c446974fcd42f1889513fc16f96b66671c2bf Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 30 Jun 2026 14:59:04 -0700
Subject: [PATCH 10/13] [editor-preview-scroll] fix tablet and desktop widths.
 remove horizontal scroll

---
 packages/perseus-editor/src/styles/perseus-editor.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 5e94675b96e..ed9bbb7a7fd 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -280,6 +280,9 @@ code {
     z-index: 10;
     /* Make the left cell scrollable. */
     overflow-y: auto;
+    /* Don't show the the horizontal scrollbar that only appears when
+     * the vertical scrollbar appears. */
+    overflow-x: hidden;
     /* Keep the left cell scroll area within the viewport. */
     max-height: 90vh;
 }
@@ -294,6 +297,9 @@ code {
     overflow-y: auto;
     /* Keep the right cell scroll area within the viewport. */
     max-height: 90vh;
+    /* Don't shrink below the preview's intrinsic width. We need this to
+     * preserve the Tablet and Desktop preview widths. */
+    flex-shrink: 0;
 }
 .perseus-hint-editor {
     padding-bottom: 20px;
@@ -368,6 +374,9 @@ code {
     overflow-y: auto;
     /* Keep the preview scroll area within the viewport. */
     max-height: 90vh;
+    /* Don't shrink below the preview's intrinsic width. We need this to
+     * preserve the Tablet and Desktop preview widths. */
+     flex-shrink: 0;
 }
 .perseus-article-editor .editor-preview.full-width {
     width: 100%;

From c5b61acdc87d43f570b1898cfc508ba39bf52fd6 Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Tue, 30 Jun 2026 15:06:06 -0700
Subject: [PATCH 11/13] [editor-preview-scroll] prettier

---
 packages/perseus-editor/src/styles/perseus-editor.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index ed9bbb7a7fd..56dead72471 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -376,7 +376,7 @@ code {
     max-height: 90vh;
     /* Don't shrink below the preview's intrinsic width. We need this to
      * preserve the Tablet and Desktop preview widths. */
-     flex-shrink: 0;
+    flex-shrink: 0;
 }
 .perseus-article-editor .editor-preview.full-width {
     width: 100%;

From f607ffb0cb858eec51494780376f8e5c94b3653e Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Wed, 1 Jul 2026 17:40:53 -0700
Subject: [PATCH 12/13] [editor-preview-scroll] make the cells fit better.
 remove unused style.

---
 .../perseus-editor/src/styles/perseus-editor.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 56dead72471..39d2800eddf 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -230,7 +230,6 @@ code {
 }
 #perseus {
     margin: 20px;
-    width: calc(100% - 500px);
     z-index: 10;
 }
 #perseus #problemarea #workarea {
@@ -283,8 +282,9 @@ code {
     /* Don't show the the horizontal scrollbar that only appears when
      * the vertical scrollbar appears. */
     overflow-x: hidden;
-    /* Keep the left cell scroll area within the viewport. */
-    max-height: 90vh;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+    max-height: calc(95vh - 244px);
 }
 .perseus-editor-right-cell {
     box-sizing: border-box;
@@ -295,8 +295,9 @@ code {
     vertical-align: top;
     /* Make the right cell scrollable. */
     overflow-y: auto;
-    /* Keep the right cell scroll area within the viewport. */
-    max-height: 90vh;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+    max-height: calc(95vh - 244px);
     /* Don't shrink below the preview's intrinsic width. We need this to
      * preserve the Tablet and Desktop preview widths. */
     flex-shrink: 0;
@@ -372,8 +373,9 @@ code {
 .perseus-article-editor .editor-preview {
     /* Make the preview scrollable. */
     overflow-y: auto;
-    /* Keep the preview scroll area within the viewport. */
-    max-height: 90vh;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+     max-height: calc(95vh - 244px);
     /* Don't shrink below the preview's intrinsic width. We need this to
      * preserve the Tablet and Desktop preview widths. */
     flex-shrink: 0;

From b748a73d3ad2ea58dc8813f69dcb85909323dbeb Mon Sep 17 00:00:00 2001
From: Nisha Yerunkar <nisha@khanacademy.org>
Date: Wed, 1 Jul 2026 17:46:30 -0700
Subject: [PATCH 13/13] [editor-preview-scroll] prettier

---
 packages/perseus-editor/src/styles/perseus-editor.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 39d2800eddf..253e1a279a0 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -375,7 +375,7 @@ code {
     overflow-y: auto;
     /* Keep the left cell scroll area within the viewport. (244px to account
      * for the header.) */
-     max-height: calc(95vh - 244px);
+    max-height: calc(95vh - 244px);
     /* Don't shrink below the preview's intrinsic width. We need this to
      * preserve the Tablet and Desktop preview widths. */
     flex-shrink: 0;