From 8dc8690607616bb2ba46bb3fd90334cd799fa573 Mon Sep 17 00:00:00 2001
From: N <18454+nixterrimus@users.noreply.github.com>
Date: Thu, 7 Sep 2023 13:03:35 -0600
Subject: [PATCH] Fix overflow in the y direction on radio choice (#706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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: https://github.com/Khan/perseus/pull/706
---
 .changeset/nasty-islands-sin.md               |  7 +++
 .../multi-renderer.test.tsx.snap              | 10 ++--
 .../__snapshots__/group.test.tsx.snap         | 10 ++--
 .../__snapshots__/radio.test.ts.snap          | 56 +++++++++----------
 packages/perseus/src/widgets/radio/choice.tsx |  3 +-
 5 files changed, 47 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/nasty-islands-sin.md

diff --git a/.changeset/nasty-islands-sin.md b/.changeset/nasty-islands-sin.md
new file mode 100644
index 0000000000..63aefb974a
--- /dev/null
+++ b/.changeset/nasty-islands-sin.md
@@ -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.
diff --git a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
index e28127636d..bf6a6554f5 100644
--- a/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
+++ b/packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
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 7c4a955b74..6c3b2fbab5 100644
--- a/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/perseus/src/widgets/__tests__/__snapshots__/group.test.tsx.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
diff --git a/packages/perseus/src/widgets/__tests__/__snapshots__/radio.test.ts.snap b/packages/perseus/src/widgets/__tests__/__snapshots__/radio.test.ts.snap
index 3b00e12e1d..612d879fc3 100644
--- a/packages/perseus/src/widgets/__tests__/__snapshots__/radio.test.ts.snap
+++ b/packages/perseus/src/widgets/__tests__/__snapshots__/radio.test.ts.snap
@@ -68,7 +68,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
                     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"
@@ -183,7 +183,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
                     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"
@@ -298,7 +298,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
                     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"
@@ -413,7 +413,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
                     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"
@@ -628,7 +628,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -769,7 +769,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -884,7 +884,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -999,7 +999,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -1200,7 +1200,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -1341,7 +1341,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -1456,7 +1456,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -1571,7 +1571,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
                     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"
@@ -1772,7 +1772,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
                     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"
@@ -1913,7 +1913,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
                     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"
@@ -2028,7 +2028,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
                     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"
@@ -2143,7 +2143,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
                     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"
@@ -2344,7 +2344,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
                     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"
@@ -2485,7 +2485,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
                     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"
@@ -2600,7 +2600,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
                     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"
@@ -2715,7 +2715,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
                     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"
@@ -2916,7 +2916,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
                     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"
@@ -3057,7 +3057,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
                     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"
@@ -3172,7 +3172,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
                     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"
@@ -3287,7 +3287,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
                     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"
@@ -3488,7 +3488,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                     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"
@@ -3710,7 +3710,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                     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"
@@ -3890,7 +3890,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                     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"
@@ -4065,7 +4065,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                     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"
diff --git a/packages/perseus/src/widgets/radio/choice.tsx b/packages/perseus/src/widgets/radio/choice.tsx
index bb4e55df06..0d290893bf 100644
--- a/packages/perseus/src/widgets/radio/choice.tsx
+++ b/packages/perseus/src/widgets/radio/choice.tsx
@@ -160,7 +160,8 @@ const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
                     display: "flex",
                     flexDirection: "row",
                     opacity: showDimmed ? 0.5 : 1.0,
-                    overflow: "auto",
+                    overflowX: "auto",
+                    overflowY: "hidden",
                 }}
             >
                 <div className="perseus-sr-only">