Skip to content

Commit

Permalink
Fix overflow in the y direction on radio choice (#706)
Browse files Browse the repository at this point in the history 
## Summary:

Fixes radio choice showing a scrollbar in the y direction when showing MathJax.

<img width="1187" alt="image" src="https://github.com/Khan/perseus/assets/18454/305aad2d-dbc8-4731-a5b1-c541e01abcdd">

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

## Test plan:
- Visit http://localhost:8090/math/algebra2/x2ec2f6f830c9fb89:exp/x2ec2f6f830c9fb89:equivalent-exp/e/rewrite-exponential-expressions?devflagk=mathjax3 with an updated perseus
- You should see math in the radio choices without overflow

Additionally
- Python content should continue to be scrollable in the x direction

Author: nixterrimus

Reviewers: nixterrimus, benchristel, nedredmond, Myranae

Required Reviewers:

Approved By: benchristel, nedredmond

Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: #706
  • Loading branch information
@nixterrimus
nixterrimus authored Sep 7, 2023
1 parent 9fdab7b commit 8dc8690
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 39 deletions.
7 changes: 7 additions & 0 deletions .changeset/nasty-islands-sin.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@khanacademy/perseus": minor
---

Ensure that radio widget choices can scroll horizontally, but not vertically.
Previously, unnecessary vertical scrollbars appeared on some choices containing
MathJax elements.
10 changes: 5 additions & 5 deletions packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -300,7 +300,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -467,7 +467,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -634,7 +634,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -801,7 +801,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down
10 changes: 5 additions & 5 deletions packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ exports[`group widget should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -248,7 +248,7 @@ exports[`group widget should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -363,7 +363,7 @@ exports[`group widget should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -478,7 +478,7 @@ exports[`group widget should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down Expand Up @@ -593,7 +593,7 @@ exports[`group widget should snapshot: initial render 1`] = `
style="flex-direction: column; color: rgb(33, 36, 44);"
>
<div
style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
style="display: flex; flex-direction: row; opacity: 1; overflow-x: auto; overflow-y: hidden;"
>
<div
class="perseus-sr-only"
Expand Down
Loading

0 comments on commit 8dc8690

Please sign in to comment.