[Image] | (UX) | Show image in explore modal even when size is undefined by nishasy · Pull Request #3367 · Khan/perseus

nishasy · 2026-03-16T23:17:56Z

Summary:

We have a number of images in our content that are saved without a size.
If the image has a long description, it makes the "explore image" button available.
If the "explore image" button is clicked and then image has no size, the modal
shows up as completely empty.

The image should show up in the modal even if there is no size. Updating that here.

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

Test plan:

pnpm jest packages/perseus/src/widgets/image/components/explore-image-modal.test.tsx

Storybook

/?path=/story/widgets-image-visual-regression-tests-interactions--long-description-clicked-state-with-no-size
/?path=/story/widgets-image-visual-regression-tests-interactions--long-description-clicked-state-with-no-size-large-image
/?path=/story/widgets-image-widget-demo--large-image-with-no-size-saved
/?path=/story/widgets-image-widget-demo--large-image-with-no-size-saved-scale-flag

Before	After


Before - scale feature flag	after - scale feature flag

…size

…mal without feature flag

…image in explore modal even when size is undefined

github-actions · 2026-03-16T23:18:36Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-16T23:19:01Z

Size Change: +14 B (0%)

Total Size: 486 kB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	187 kB	+14 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.5 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.96 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`	11.8 kB
`packages/perseus-core/dist/es/index.js`	24.9 kB
`packages/perseus-editor/dist/es/index.js`	100 kB
`packages/perseus-linter/dist/es/index.js`	8.83 kB
`packages/perseus-score/dist/es/index.js`	9.4 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.47 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-03-16T23:19:04Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-03-16T23:20:00Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3367

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

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

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

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

nishasy · 2026-03-16T23:24:40Z

packages/perseus/src/widgets/image/components/explore-image-modal-content.tsx

-        // bgWidth / bgHeight = X / modalImageHeight
-        // => X = (bgWidth / bgHeight) * modalImageHeight
-        width =
-            (backgroundImage.width / backgroundImage.height) * modalImageHeight;


I considered removing this block entirely, since the sizing just works with undefined now. However, I opted to keep this block here since it will be useful for the work in my other branch on scaled graphie labels.

nishasy · 2026-03-16T23:26:12Z

packages/perseus/src/widgets/image/components/explore-image-modal.test.tsx

This file has a lot of changes because of the boilerplate code that had to be updated to allow the image to actually load for testing.

nishasy · 2026-03-16T23:32:04Z

packages/perseus/src/widgets/image/components/explore-image-modal-content.tsx

-        !backgroundImage.height ||
-        !backgroundImage.width ||
-        !backgroundImage.url
-    ) {


The culprit

nishasy · 2026-03-16T23:32:33Z

packages/perseus/src/widgets/image/image-widget.module.css

    background-color: var(--wb-semanticColor-core-background-base-default);
+    /* Stop large images from overflowing out of the image area of the modal. */
+    max-width: 100%;
+    max-height: var(--modal-panel-height);


Large images would overflow and cover the long description without this CSS.

This CSS looks appropriate. However, I would prefer some changes to how the CSS variables are handled. I realize that this may be beyond the intent of this PR, but these changes will help to avoid potential conflicts.

Namespace the CSS variables

Instead of --modal-panel-height, I recommend using --perseus-image-modal-panel-height

This will prevent naming conflicts with other parts of the application that have a modal panel height variable of the same name.

Attach the CSS variables to .modal-container instead of :root

Even if variables are namespaced, adding them to the :root element overloads that element with variables that don't apply anywhere else other than the image widget.

If the variables are NOT namespaced, then this runs the risk of overriding the variable if it exists anywhere else in frontend, or of being overridden by a setting elsewhere in frontend.

claude · 2026-03-16T23:32:47Z

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review.

nishasy · 2026-03-16T23:42:07Z

Tested it in my local server with a PR tag using the exercise that I first noticed this issue in:

Before	After

nishasy · 2026-03-17T00:32:34Z

packages/perseus/src/widgets/image/image-widget.module.css

    display: flex;
    width: 100%;
    justify-content: center;
 }


@mark-fitzgerald Is it okay for .modal-container to be defined in two spots like this to separate out where the variables are defined?

nishasy added 5 commits March 16, 2026 15:26

[image-no-size-explore-modal] Add regression story for modal with no …

2b44d0e

…size

[image-no-size-explore-modal] Get the explore image modal back to nor…

8426ec5

…mal without feature flag

[image-no-size-explore-modal] fix empty modal

d33196c

[image-no-size-explore-modal] add tests

4fc7fd1

[image-no-size-explore-modal] docs(changeset): [Image] | (UX) | Show …

61728e5

…image in explore modal even when size is undefined

nishasy self-assigned this Mar 16, 2026

nishasy added the olc-5.0.c4fcb label Mar 16, 2026

[image-no-size-explore-modal] keep some of the old logic

8f44243

nishasy commented Mar 16, 2026

View reviewed changes

[image-no-size-explore-modal] remove guaranteed undefined

a1b268d

nishasy commented Mar 16, 2026

View reviewed changes

nishasy requested review from a team and mark-fitzgerald March 16, 2026 23:31

nishasy commented Mar 16, 2026

View reviewed changes

nishasy marked this pull request as ready for review March 16, 2026 23:32

nishasy requested review from catandthemachines and ivyolamit as code owners March 16, 2026 23:32

[image-no-size-explore-modal] update scoping for image widget CSS

82c5b8b

nishasy commented Mar 17, 2026

View reviewed changes

Conversation

nishasy commented Mar 16, 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 Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

nishasy Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

claude bot commented Mar 16, 2026

Claude Code Review

Uh oh!

nishasy commented Mar 16, 2026

Uh oh!

nishasy Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nishasy commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading