From 6dbc58c641e1b2b51e9ec5fa4b12a43db1217b62 Mon Sep 17 00:00:00 2001
From: N <18454+nixterrimus@users.noreply.github.com>
Date: Wed, 18 Oct 2023 12:37:30 -0600
Subject: [PATCH] Fixup image caption overlap on mobile (#765)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

After the fix:
![Screenshot 2023-10-15 at 7 28 13 PM](https://github.com/Khan/perseus/assets/18454/c6f749d6-3025-47b4-8a0a-914d9bee7df9)


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

Author: nixterrimus

Reviewers: jeremywiebe, nixterrimus

Required Reviewers:

Approved By: jeremywiebe

Checks: ❌ codecov/project, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress (ubuntu-latest, 16.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/765
---
 .changeset/new-ants-decide.md                      |  5 +++++
 packages/perseus/src/styles/widgets/image.less     |  8 ++------
 .../src/widgets/__stories__/image.stories.tsx      |  1 +
 .../__tests__/__snapshots__/group.test.tsx.snap    |  1 +
 .../__tests__/__snapshots__/image.test.ts.snap     |  2 ++
 packages/perseus/src/widgets/image.tsx             | 14 ++++++++++++--
 6 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/new-ants-decide.md

diff --git a/.changeset/new-ants-decide.md b/.changeset/new-ants-decide.md
new file mode 100644
index 0000000000..2aaef7b8c9
--- /dev/null
+++ b/.changeset/new-ants-decide.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Fix image centering for widget
diff --git a/packages/perseus/src/styles/widgets/image.less b/packages/perseus/src/styles/widgets/image.less
index 020d61239c..5e0004489a 100644
--- a/packages/perseus/src/styles/widgets/image.less
+++ b/packages/perseus/src/styles/widgets/image.less
@@ -1,5 +1,6 @@
 .perseus-image-widget {
-    margin: 0;
+    margin-left: auto;
+    margin-right: auto;
 
     .perseus-image-title {
         text-align: center;
@@ -10,11 +11,6 @@
         padding-left: 16px;
         position: relative;
 
-        // This offsets the paragraph's padding
-        // So that the caption sits much closer
-        // to the image
-        top: -12px;
-
         &::before {
             content: "";
             position: absolute;
diff --git a/packages/perseus/src/widgets/__stories__/image.stories.tsx b/packages/perseus/src/widgets/__stories__/image.stories.tsx
index e9a01c66b7..39d96116ed 100644
--- a/packages/perseus/src/widgets/__stories__/image.stories.tsx
+++ b/packages/perseus/src/widgets/__stories__/image.stories.tsx
@@ -72,6 +72,7 @@ export const Question2 = (args: StoryArgs): React.ReactElement => {
                     imageOptions != null
                         ? {
                               ...imageOptions,
+                              alignment: "full-width",
                               title: args.title,
                               caption:
                                   "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",
diff --git a/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap b/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
index 6c3b2fbab5..f9487651b5 100644
--- a/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
@@ -1146,6 +1146,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                         >
                           <figure
                             class="perseus-image-widget"
+                            style="max-width: 380px;"
                           >
                             <div
                               class="fixed-to-responsive svg-image"
diff --git a/packages/perseus/src/widgets/__tests__/__snapshots__/image.test.ts.snap b/packages/perseus/src/widgets/__tests__/__snapshots__/image.test.ts.snap
index 90fbc5e0ae..33eedb91ca 100644
--- a/packages/perseus/src/widgets/__tests__/__snapshots__/image.test.ts.snap
+++ b/packages/perseus/src/widgets/__tests__/__snapshots__/image.test.ts.snap
@@ -26,6 +26,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="fixed-to-responsive svg-image"
@@ -207,6 +208,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
               >
                 <figure
                   class="perseus-image-widget"
+                  style="max-width: 420px;"
                 >
                   <div
                     class="perseus-image-title"
diff --git a/packages/perseus/src/widgets/image.tsx b/packages/perseus/src/widgets/image.tsx
index bafb184657..4638a1fcf3 100644
--- a/packages/perseus/src/widgets/image.tsx
+++ b/packages/perseus/src/widgets/image.tsx
@@ -220,7 +220,12 @@ class ImageWidget extends React.Component<Props> {
             }
 
             return (
-                <figure className="perseus-image-widget">
+                <figure
+                    className="perseus-image-widget"
+                    style={{
+                        maxWidth: backgroundImage.width,
+                    }}
+                >
                     {image}
                     {alt}
                     {titleAndCaption}
@@ -260,7 +265,12 @@ class ImageWidget extends React.Component<Props> {
         }
 
         return (
-            <figure className="perseus-image-widget">
+            <figure
+                className="perseus-image-widget"
+                style={{
+                    maxWidth: backgroundImage.width,
+                }}
+            >
                 {title}
                 {image}
                 {alt}