[Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX …

…support via Renderer (#2059)

## Summary: ##
With the recent change in how dropdown content is rendered, the use of the `<Renderer>` component brought along styling that is overly broad and caused text to be enlarged and shifted up. This bugfix adds styling that targets only instances of renderer styling within a dropdown.

Issue: LEMS-2742

## Test plan:
1. Open any article that contains dropdown widgets, like this one in [Test Everything](https://www.khanacademy.org/internal-courses/test-everything/test-everything-1/te-dropdown/a/dropdown-with-labels).
(Note: this issue is only present in Articles - exercises are unaffected by this bug)

2. Dropdown answers and placeholders should appear centered within the border of the dropdown.

## Affected UI
### Before:
![Dropdown - Before](https://github.com/user-attachments/assets/0f04b89c-0747-4f02-a7dd-61c59b27c917)

### After:
![Dropdown - After](https://github.com/user-attachments/assets/ac9fb004-89fe-471f-84a2-70f1d591574a)

Author: mark-fitzgerald

Reviewers: catandthemachines, mark-fitzgerald, anakaren-rojas

Required Reviewers:

Approved By: catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x)

Pull Request URL: #2059

.changeset/twenty-cats-invent.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX support via Renderer

packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -355,7 +355,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
               Test visible label
             </label>
             <div
-              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
             >
               <span
                 aria-atomic="true"
@@ -447,7 +447,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
               Test visible label
             </label>
             <div
-              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
             >
               <span
                 aria-atomic="true"
@@ -539,7 +539,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
               Test visible label
             </label>
             <div
-              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
             >
               <span
                 aria-atomic="true"

packages/perseus/src/styles/perseus-renderer.less

@@ -414,6 +414,12 @@
     padding: 25px 25px 0 0;
 }
 
+.perseus-dropdown .perseus-renderer .paragraph {
+    /* overriding overly broad selectors in .framework-perseus rules */
+    margin-bottom: 0 !important;
+    font-size: 18px !important;
+}
+
 @import "./widgets/categorizer.less";
 @import "./widgets/dropdown.less";
 @import "./widgets/expression.less";

packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap

@@ -20,7 +20,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
             class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
             >
               <span
                 aria-atomic="true"
@@ -108,7 +108,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
             class="default_xu2jcg"
           >
             <div
-              class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
+              class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
             >
               <span
                 aria-atomic="true"

packages/perseus/src/widgets/dropdown/dropdown.tsx

@@ -119,6 +119,7 @@ class Dropdown extends React.Component<Props> implements Widget {
                         <SingleSelect
                             id={dropdownId}
                             placeholder=""
+                            className="perseus-dropdown"
                             onChange={(value) =>
                                 this._handleChange(parseInt(value))
                             }