Put the left and right sides of the editor in separate scroll areas. by nishasy · Pull Request #3832 · Khan/perseus

nishasy · 2026-06-26T23:52:34Z

Summary:

It's hard for content authors to view the preview when working in the editor that's
gone way past the preview vertically.

Making it easier for content authors to view different vertical points between the
left and right cells in the editor by giving the left and right sides separate
scroll areas.

Issue: https://khanacademy.atlassian.net/browse/LEMS-4305

Test plan:

Storybook

/?path=/story/editors-editorpage--with-all-widgets
/?path=/story/editors-articleeditor--demo

Use the local dev server to test the behavior in

Exercise editor (default)
Exercise editor (matrix)
Article editor

… of the editor in separate scroll areas.

github-actions · 2026-06-26T23:54:08Z

Size Change: -12 B (0%)

Total Size: 517 kB

📦 View Changed

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	104 kB	-12 B (-0.01%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.6 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.31 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	12.9 kB
`packages/perseus-core/dist/es/index.js`	27.6 kB
`packages/perseus-linter/dist/es/index.js`	9.79 kB
`packages/perseus-score/dist/es/index.js`	9.86 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/index.js`	204 kB
`packages/perseus/dist/es/strings.js`	12.4 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

…editor too

github-actions · 2026-06-27T00:10:16Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (b748a73) and published it to npm. You
can install it using the tag PR3832.

Example:

pnpm add @khanacademy/perseus@PR3832

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3832

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3832

…ok more like the original width

nishasy · 2026-06-27T00:16:32Z

These overflows were causing nested scroll bars within the preview iframe.

nishasy · 2026-06-27T00:29:34Z

I noticed that the new styling sort of broke this in the Article editor, so I made sure to update that. Can anyone think of other editors that I need to double check before finalizing this?

nishasy · 2026-06-27T00:41:18Z

Posting the before/after here instead of the description because I don't want the checks to rerun:

Before

Screen.Recording.2026-06-25.at.3.25.19.PM.mov

After

Screen.Recording.2026-06-25.at.3.25.47.PM.mov

mark-fitzgerald · 2026-06-30T16:10:54Z

    table-layout: fixed;
 }
 .perseus-editor-row {
-    display: table-row;


Since you are removing the table-based styling for the row and cell, you should also remove the display: table for the .perseus-editor-table container.

mark-fitzgerald · 2026-06-30T19:17:38Z

+    // Set the overflow to hidden on the body within the iframe
+    // to prevent nested scrollbars from appearing.
+    React.useEffect(() => {
+        document.body.style.overflow = "hidden";


I'm not really thrilled with setting the <body> of the iFrame to overflow: hidden. I think that the container <div> shouldn't have the scroll, but that the internal document within the iframe should be the scrollable item. However, I think we can put that on a different PR (especially if we can get away from using an iFrame). So, I'm good with keeping this as-is for now.

I'm good with revisiting it another time. I'm not sure the best way to revisit the nested scroll bars otherwise.

mark-fitzgerald · 2026-06-30T19:18:21Z

I noticed that the new styling sort of broke this in the Article editor, so I made sure to update that. Can anyone think of other editors that I need to double check before finalizing this?

Did you check the Hint editor?

nishasy · 2026-06-30T20:41:02Z

@mark-fitzgerald I believe the Hint Editor is already included inside EditorPage, so I'd say I did check it there.

…tal scroll

mark-fitzgerald · 2026-06-30T23:22:18Z

+     * the vertical scrollbar appears. */
+    overflow-x: hidden;
+    /* Keep the left cell scroll area within the viewport. */
+    max-height: 90vh;


I recommend the following, so that the scroll area fits better (accounting for the header items above the editor):

max-heght: calc(95vh - 244px);

Same for the right cell, below.

mark-fitzgerald · 2026-06-30T23:25:10Z

I know this isn't part of your change, but this width setting can probably be removed. The 500px was for something that is no longer in place, or is already accounted for. I did a quick test and removing it doesn't alter anything in the exercise editor.

@benchristel

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/perseus-core@30.1.0 ### Minor Changes - [#3854](#3854) [`4306c90`](4306c90) Thanks [@benchristel](https://github.com/benchristel)! - The Grapher widget is now marked **accessible** if it has a single available function type that is not `quadratic`, and no background image. ### Patch Changes - [#3859](#3859) [`eec5371`](eec5371) Thanks [@benchristel](https://github.com/benchristel)! - The now-unused feature flag "input-number-to-numeric-input" has been removed. - [#3855](#3855) [`8d25dbd`](8d25dbd) Thanks [@benchristel](https://github.com/benchristel)! - The `grapher-to-interactive-graph` feature flag has been removed. Graphers now render as Interactive Graphs if they have a single available function type that is not `quadratic`. ## @khanacademy/keypad-context@3.2.71 ### Patch Changes - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 ## @khanacademy/kmath@2.4.30 ### Patch Changes - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 ## @khanacademy/math-input@26.4.44 ### Patch Changes - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 - @khanacademy/keypad-context@3.2.71 ## @khanacademy/perseus@79.1.2 ### Patch Changes - [#3847](#3847) [`855f36d`](855f36d) Thanks [@Evelas78](https://github.com/Evelas78)! - Regression tests for sorter - [#3802](#3802) [`45feb6d`](45feb6d) Thanks [@Evelas78](https://github.com/Evelas78)! - Added multiple regression tests for the radio widget - [#3812](#3812) [`53b4221`](53b4221) Thanks [@nishasy](https://github.com/nishasy)! - [ColorSync][numeric input] Add more regression stories for the Numeric Input widget - [#3859](#3859) [`eec5371`](eec5371) Thanks [@benchristel](https://github.com/benchristel)! - The now-unused feature flag "input-number-to-numeric-input" has been removed. - [#3855](#3855) [`8d25dbd`](8d25dbd) Thanks [@benchristel](https://github.com/benchristel)! - The `grapher-to-interactive-graph` feature flag has been removed. Graphers now render as Interactive Graphs if they have a single available function type that is not `quadratic`. - [#3835](#3835) [`e5c4c92`](e5c4c92) Thanks [@jandrade](https://github.com/jandrade)! - Migrate Wonder Blocks font sizing from the deprecated `font.size` / `--wb-font-size` tokens to the newer `font.body.size` / `--wb-font-body-size` tokens. Sizes that have no `body` equivalent (`large`) now use the matching `font.heading.size` token. - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 - @khanacademy/keypad-context@3.2.71 - @khanacademy/kmath@2.4.30 - @khanacademy/math-input@26.4.44 - @khanacademy/perseus-linter@5.1.11 - @khanacademy/perseus-score@8.12.3 ## @khanacademy/perseus-editor@34.1.2 ### Patch Changes - [#3832](#3832) [`4f11360`](4f11360) Thanks [@nishasy](https://github.com/nishasy)! - Put the left and right sides of the editor in separate scroll areas - [#3828](#3828) [`ffc1dcd`](ffc1dcd) Thanks [@catandthemachines](https://github.com/catandthemachines)! - [Interactive Graph][editor] Fix invariant error in interactve graph editor. - [#3835](#3835) [`e5c4c92`](e5c4c92) Thanks [@jandrade](https://github.com/jandrade)! - Migrate Wonder Blocks font sizing from the deprecated `font.size` / `--wb-font-size` tokens to the newer `font.body.size` / `--wb-font-body-size` tokens. Sizes that have no `body` equivalent (`large`) now use the matching `font.heading.size` token. - Updated dependencies \[[`855f36d`](855f36d), [`45feb6d`](45feb6d), [`53b4221`](53b4221), [`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd), [`e5c4c92`](e5c4c92)]: - @khanacademy/perseus@79.1.2 - @khanacademy/perseus-core@30.1.0 - @khanacademy/keypad-context@3.2.71 - @khanacademy/kmath@2.4.30 - @khanacademy/math-input@26.4.44 - @khanacademy/perseus-linter@5.1.11 ## @khanacademy/perseus-linter@5.1.11 ### Patch Changes - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 - @khanacademy/kmath@2.4.30 ## @khanacademy/perseus-score@8.12.3 ### Patch Changes - Updated dependencies \[[`eec5371`](eec5371), [`4306c90`](4306c90), [`8d25dbd`](8d25dbd)]: - @khanacademy/perseus-core@30.1.0 - @khanacademy/kmath@2.4.30 Author: khan-actions-bot Reviewers: benchristel Required Reviewers: Approved By: benchristel Checks: ✅ 11 checks were successful Pull Request URL: #3861

nishasy added 4 commits June 26, 2026 16:20

[editor-preview-scroll] poc

34df5db

[editor-preview-scroll] remove nested scroll bars

35cad34

[editor-preview-scroll] comments

44e5544

[editor-preview-scroll] docs(changeset): Put the left and right sides…

0aebe50

… of the editor in separate scroll areas.

nishasy self-assigned this Jun 26, 2026

nishasy added the olc-5.0.1445a label Jun 26, 2026

[editor-preview-scroll] Apply the scroll behavior within the article …

daec79f

…editor too

[editor-preview-scroll] remove padding on the left side to make it lo…

9f97211

…ok more like the original width

nishasy requested review from a team, jeremywiebe and mark-fitzgerald June 27, 2026 00:16

nishasy commented Jun 27, 2026

View reviewed changes

nishasy marked this pull request as ready for review June 27, 2026 00:29

mark-fitzgerald reviewed Jun 30, 2026

View reviewed changes

mark-fitzgerald approved these changes Jun 30, 2026

View reviewed changes

nishasy added 5 commits June 30, 2026 13:45

[editor-preview-scroll] Merge branch 'main' into editor-preview-scroll

1c84c0c

[editor-preview-scroll] remove display table

86a0c74

[editor-preview-scroll] update table styles

e92260f

[editor-preview-scroll] snapshots

734ebef

[editor-preview-scroll] fix tablet and desktop widths. remove horizon…

fc7c446

…tal scroll

nishasy requested a review from mark-fitzgerald June 30, 2026 21:59

[editor-preview-scroll] prettier

c5b61ac

mark-fitzgerald reviewed Jun 30, 2026

View reviewed changes

mark-fitzgerald approved these changes Jun 30, 2026

View reviewed changes

nishasy added 3 commits July 1, 2026 17:36

[editor-preview-scroll] Merge branch 'main' into editor-preview-scroll

5343d60

[editor-preview-scroll] make the cells fit better. remove unused style.

f607ffb

[editor-preview-scroll] prettier

b748a73

nishasy merged commit 4f11360 into main Jul 2, 2026
12 checks passed

nishasy deleted the editor-preview-scroll branch July 2, 2026 00:52

khan-actions-bot mentioned this pull request Jul 2, 2026

Version Packages #3861

Merged

Uh oh!

Conversation

nishasy commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

github-actions Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

nishasy Jun 27, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy commented Jun 27, 2026

Uh oh!

nishasy commented Jun 27, 2026

Before

After

Uh oh!

mark-fitzgerald Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald commented Jun 30, 2026

Uh oh!

nishasy commented Jun 30, 2026

Uh oh!

mark-fitzgerald Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nishasy commented Jun 26, 2026 •

edited

Loading

github-actions Bot commented Jun 26, 2026 •

edited

Loading

github-actions Bot commented Jun 27, 2026 •

edited

Loading