[Explanation] Bugfix - Math within the widget has additional space added below it when in mobile viewport #3084
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ion-widget] docs(changeset): [Explanation] Bugix - Math within the widget has additional space added below it when in mobile viewport
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: +92 B (+0.02%) Total Size: 499 kB
ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (ec0f963) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3084If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3084If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3084 |
…ion-widget] Add logic to exclude invalid measurements when parent height is zero. Add debugging statements to aid in verifying calculations.
…ion-widget] Additional debugging messages.
…ion-widget] Use ancestor to determine if width is zero - parent node can still have width when hidden.
…ion-widget] Set initial state to "expanded" to test logic.
…ion-widget] Reset initial state of explanation widget. Remove debugging messages.
…ion-widget] Add a height check on the children of the math container to ensure that we are getting the best representation of the math height.
mark-fitzgerald
changed the title
…ion-widget] Add a default value for the text default height.
ivyolamit
approved these changes
Dec 5, 2025
Contributor
ivyolamit
left a comment
ivyolamit
left a comment
There was a problem hiding this comment.
@mark-fitzgerald implementation looks logical to me, thanks for making this change 🎉
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
When TeX is displayed in a mobile viewport, it is reduced in size so that it can be seen in its entirety. It is made "zoomable" so that a user can click the math and have it display at its normal size, and scroll to see the offscreen content. The math is initially reduced in size by calculating the available width and comparing it to the actual width of the math element.
When zoomable math is displayed within the Explanation widget, it is hidden along with the rest of the explanation content. Part of the hiding involves reducing the size of the explanation container to a width of zero. When an HTML element has a width of zero, it causes the height to be extremely tall in order to accommodate all the content within. When the zoomable math reduction is calculated in this situation, it uses this invalid height information. This PR resolve this by using more reliable height information (elements not affected by the zero-width container). It only does this adjusted calculation when one of the ancestor containers has
aria-hidden="true"added (indicating that the element is hidden from view).Issue: LEMS-3608
Test plan:
Bugfix:
Regression test: