[Image] | (UX) | Align caption to image in case where image has no size by nishasy · Pull Request #3411 · Khan/perseus

nishasy · 2026-03-24T23:08:05Z

Summary:

There's a bug where the caption is not aligned to the image if the image has no size,
and it stretches as far as possible instead.

Trying to fix that here.

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

Test plan:

Storybook

/?path=/story/widgets-image-visual-regression-tests--image-without-width-or-height-with-caption-title-and-long-description
/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved
/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved-scale-flag

Before:

After:

… case where image has no size There's a bug where the caption is not aligned to the image if the image has no size, and it stretches as far as possible instead. Trying to fix that here. Issue: https://khanacademy.atlassian.net/browse/LEMS-3966 Test plan: Storybook - `/?path=/story/widgets-image-visual-regression-tests--image-without-width-or-height-with-caption-title-and-long-description` - `/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved` - `/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved-scale-flag`

…ption to image in case where image has no size

github-actions · 2026-03-24T23:08:53Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-24T23:09:17Z

Size Change: -3 B (0%)

Total Size: 494 kB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	193 kB	-3 B (0%)

ℹ️ 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`	6.21 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.9 kB
`packages/perseus-core/dist/es/index.js`	25.1 kB
`packages/perseus-editor/dist/es/index.js`	101 kB
`packages/perseus-linter/dist/es/index.js`	9.3 kB
`packages/perseus-score/dist/es/index.js`	9.66 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.09 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-24T23:09:23Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-03-24T23:10:13Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3411

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

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

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

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

…ssion is being fixed now

claude

Claude Code Review

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

_{Tip: disable this comment in your organization's Code Review settings.}

mark-fitzgerald · 2026-03-30T21:38:06Z

packages/perseus/src/widgets/image/image.tsx

+    // `backgroundImage` - this is the width intended to be used when rendering
+    // the image within the content item.
+    const maxWidth =
+        backgroundImage.width && backgroundImage.height


Nit: Does a check of backgroundImage.height need to be performed here if we are just using backgroundImage.width?

I would prefer to go the undefined route in the case that the width exists but the height doesn't (although it is very unlikely to happen), as the height would be treated as 0 in that case and the image would not be visible.

I just tested a case where the width was set and the height wasn't. Looks like the image loader sets the width to the specified width and the height to 0 if it's undefined. I'll add a comment to clarify the condition in the code.

Never mind. That happens whether I add the && backgroundImage.height or not.

mark-fitzgerald · 2026-03-30T21:41:03Z

packages/perseus/src/widgets/image/components/image-info-area.tsx

-                    style={{
-                        maxWidth: scaleFF ? backgroundImage.width : zoomWidth,
-                    }}
+                    style={{flex: 1, minWidth: 0}}


A comment about why each style property is being set would be helpful.

mark-fitzgerald

CSS changes look good.

catandthemachines

Looks good to me. Thanks Nisha!

…ecessary conditional.

…caption

@nishasy

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/[email protected] ### Patch Changes - [#3411](#3411) [`94ad54eb43`](94ad54e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Align caption to image in case where image has no size - [#3439](#3439) [`468910ec63`](468910e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Stop large portrait images from overflowing in zoom view - [#3436](#3436) [`634e65efab`](634e65e) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Radio] Fix color of text in correct option choice to match specs (theme-based green) ## @khanacademy/[email protected] ### Patch Changes - [#3411](#3411) [`94ad54eb43`](94ad54e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Align caption to image in case where image has no size - Updated dependencies \[[`94ad54eb43`](94ad54e), [`468910ec63`](468910e), [`634e65efab`](634e65e)]: - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: claude[bot], anakaren-rojas Required Reviewers: Approved By: anakaren-rojas Checks: ⏭️ 2 checks have been skipped, ✅ 6 checks were successful Pull Request URL: #3437

…ze (#3411) ## Summary: There's a bug where the caption is not aligned to the image if the image has no size, and it stretches as far as possible instead. Trying to fix that here. Issue: https://khanacademy.atlassian.net/browse/LEMS-3966 ## Test plan: Storybook - `/?path=/story/widgets-image-visual-regression-tests--image-without-width-or-height-with-caption-title-and-long-description` - `/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved` - `/?path=/story/widgets-image-widget-demo--small-image-with-no-size-saved-scale-flag` ### Before: <img width="1439" height="530" alt="Screenshot 2026-03-26 at 1 24 58 PM" src="https://github.com/user-attachments/assets/ac9cecd0-2ca9-4cc6-adc2-4780240c8b8d" /> ### After: <img width="1440" height="533" alt="Screenshot 2026-03-26 at 1 25 24 PM" src="https://github.com/user-attachments/assets/81b11f62-93a5-4692-a3f9-58e330a845ec" /> Author: nishasy Reviewers: claude[bot], mark-fitzgerald, catandthemachines, nishasy, ivyolamit Required Reviewers: Approved By: mark-fitzgerald, catandthemachines Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3411

@nishasy

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/[email protected] ### Patch Changes - [#3411](#3411) [`94ad54eb43`](94ad54e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Align caption to image in case where image has no size - [#3439](#3439) [`468910ec63`](468910e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Stop large portrait images from overflowing in zoom view - [#3436](#3436) [`634e65efab`](634e65e) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Radio] Fix color of text in correct option choice to match specs (theme-based green) ## @khanacademy/[email protected] ### Patch Changes - [#3411](#3411) [`94ad54eb43`](94ad54e) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Align caption to image in case where image has no size - Updated dependencies \[[`94ad54eb43`](94ad54e), [`468910ec63`](468910e), [`634e65efab`](634e65e)]: - @khanacademy/[email protected] Author: khan-actions-bot Reviewers: claude[bot], anakaren-rojas Required Reviewers: Approved By: anakaren-rojas Checks: ⏭️ 2 checks have been skipped, ✅ 6 checks were successful Pull Request URL: #3437

nishasy added 2 commits March 24, 2026 16:05

[image-misaligned-caption] docs(changeset): [Image] | (UX) | Align ca…

d283d85

…ption to image in case where image has no size

nishasy self-assigned this Mar 24, 2026

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

nishasy added 2 commits March 26, 2026 13:23

[image-misaligned-caption] snapshots

c72006c

[image-misaligned-caption] Remove regression comments since the regre…

c6fe3d8

…ssion is being fixed now

nishasy marked this pull request as ready for review March 26, 2026 20:33

nishasy requested review from catandthemachines and ivyolamit as code owners March 26, 2026 20:33

claude bot reviewed Mar 26, 2026

View reviewed changes

nishasy requested a review from mark-fitzgerald March 30, 2026 17:48

mark-fitzgerald reviewed Mar 30, 2026

View reviewed changes

mark-fitzgerald approved these changes Mar 30, 2026

View reviewed changes

catandthemachines approved these changes Mar 30, 2026

View reviewed changes

nishasy added 3 commits March 30, 2026 15:17

[image-misaligned-caption] Remove unecessary inline style. Remove unn…

943d009

…ecessary conditional.

[image-misaligned-caption] Merge branch 'main' into image-misaligned-…

bd33b23

…caption

[image-misaligned-caption] update snapshots

4f57e97

nishasy merged commit 94ad54e into main Mar 31, 2026
11 checks passed

nishasy deleted the image-misaligned-caption branch March 31, 2026 17:10

khan-actions-bot mentioned this pull request Mar 31, 2026

Version Packages #3437

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Image] | (UX) | Align caption to image in case where image has no size#3411

[Image] | (UX) | Align caption to image in case where image has no size#3411
nishasy merged 7 commits intomainfrom
image-misaligned-caption

nishasy commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

claude bot left a comment

Uh oh!

mark-fitzgerald Mar 30, 2026

Uh oh!

nishasy Mar 30, 2026

Uh oh!

nishasy Mar 30, 2026

Uh oh!

nishasy Mar 30, 2026

Uh oh!

mark-fitzgerald Mar 30, 2026

Uh oh!

mark-fitzgerald left a comment

Uh oh!

catandthemachines left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary:

Test plan:

Before:

After:

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

npm Snapshot: Published

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

mark-fitzgerald Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

nishasy Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

mark-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

catandthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nishasy commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading

github-actions bot commented Mar 24, 2026 •

edited

Loading