Fixup image caption overlap on mobile

[nixterrimus]

Summary:

Fixes image caption overlapping on mobile and re-centers text and image so that it matches previous behavior.

After the fix:

Issue: https://khanacademy.atlassian.net/browse/LC-1351

Test plan:

This can be test a little bit in storybook:

• Go to the image caption
• Try it with both the user agent set to desktop and a mobile browser
• Things should look ok

However to really test this, it needs a ZND. After deploying a ZND check out

• /science/ms-biology/x0c5bb03129646fd6:organism-growth-and-reproduction/x0c5bb03129646fd6:sexual-and-asexual-reproduction/a/sexual-and-asexual-reproduction

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/new-ants-decide.md, packages/perseus/src/widgets/image.tsx, packages/perseus/src/styles/widgets/image.less, packages/perseus/src/widgets/__stories__/image.stories.tsx, packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap, packages/perseus/src/widgets/__tests__/__snapshots__/image.test.ts.snap

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +10 B (0%)

Total Size: 852 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	398 kB	+10 B (0%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.25 kB
packages/math-input/dist/es/index.js	105 kB
packages/perseus-core/dist/es/index.js	905 B
packages/perseus-editor/dist/es/index.js	268 kB
packages/perseus-error/dist/es/index.js	847 B
packages/perseus-linter/dist/es/index.js	21.4 kB
packages/pure-markdown/dist/es/index.js	3.77 kB
packages/simple-markdown/dist/es/index.js	12.3 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR765

[jeremywiebe]

One question about image width, but otherwise, this looks good! Thanks for fixing.

[jeremywiebe]

question: Are we guaranteed to always have a width?

[nixterrimus]

Yes background image will always have a width, as far as I know

[codecov]

Codecov Report

Merging #765 (4ad5bd9) into main (a18ef7e) will decrease coverage by 4.28%.
Report is 417 commits behind head on main.
The diff coverage is 60.13%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #765      +/-   ##
==========================================
- Coverage   65.50%   61.22%   -4.28%     
==========================================
  Files         481      499      +18     
  Lines      103961   109231    +5270     
  Branches     5620     8853    +3233     
==========================================
- Hits        68095    66875    -1220     
- Misses      35866    42356    +6490     

Files	Coverage Δ
packages/kas/src/compare.js	94.28% <100.00%> (+1.42%)	⬆️
packages/kas/src/index.js	100.00% <100.00%> (ø)
packages/kas/src/nodes.js	94.67% <ø> (-0.99%)	⬇️
packages/kmath/src/index.ts	100.00% <100.00%> (ø)
packages/kmath/src/line.ts	100.00% <100.00%> (ø)
packages/kmath/src/number.ts	100.00% <100.00%> (ø)
packages/math-input/src/components/common-style.ts	100.00% <100.00%> (ø)
...math-input/src/components/input/cursor-contexts.ts	100.00% <100.00%> (ø)
...ges/math-input/src/components/input/math-input.tsx	54.75% <ø> (ø)
...es/math-input/src/components/input/math-wrapper.ts	77.55% <ø> (ø)
... and 111 more

... and 759 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6751a68...4ad5bd9. Read the comment docs.