Fixup image caption overlap on mobile (#765)

## 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: #765
Khan · Oct 18, 2023 · 6dbc58c · 6dbc58c
1 parent 77bd12d
commit 6dbc58c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/.changeset/new-ants-decide.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
-Original file line number
+Diff line change
@@ Expand Up @@
                             >
                               <figure
                                 class="perseus-image-widget"
+                                style="max-width: 380px;"
                               >
                                 <div
                                   class="fixed-to-responsive svg-image"
@@ Expand Down @@