[Interactive Graph Editor] Fix the dropdowns overlapping labels in lo…

…cked figures settings (#1471)

## Summary:
There was an issue where some of the dropdowns in the locked figures settings are
expanding to fit their content, and thereby overlapping other labels. The intended
behavior is for the dropdown label to truncate.

Fixing that with CSS here.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2118

## Test plan:
Storybook
- http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figures-m-2-b-flag
- Use the dev tools to make all the locked figure settings 306px to reflect how they
  are in webapp.
- Set all the dropdowns to their longest options.
- Confirm that they truncate, and that the horizontal space between the labels
  and dropdowns is there.


## Screenshots

| Before | After |
| --- | --- |
| <img width="326" alt="Screenshot 2024-07-31 at 5 07 54 PM" src="https://github.com/user-attachments/assets/20549cc8-b8f6-4142-b742-14853296c2e2"> | <img width="340" alt="Screenshot 2024-07-31 at 5 05 56 PM" src="https://github.com/user-attachments/assets/c0e6b803-4546-4be7-a6ee-116c379c4f07"> |
| <img width="326" alt="Screenshot 2024-07-31 at 5 08 51 PM" src="https://github.com/user-attachments/assets/471621a4-2a78-4960-b822-71e4a188eb97"> | <img width="333" alt="Screenshot 2024-07-31 at 5 06 07 PM" src="https://github.com/user-attachments/assets/328825a8-84bc-408b-9f6c-cb931faa3a82"> |
| <img width="330" alt="Screenshot 2024-07-31 at 5 09 18 PM" src="https://github.com/user-attachments/assets/8b2e9128-9f92-43a4-a240-5ac52add9ed8"> | <img width="339" alt="Screenshot 2024-07-31 at 5 06 13 PM" src="https://github.com/user-attachments/assets/8ed5c89d-6af0-4bf0-8315-16b7cbec0493"> |

Author: nishasy

Reviewers: mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ gerald, ⏭️  Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (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), 🚫 Upload Coverage, ✅ gerald, ⏭️  Publish npm snapshot, 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1471

.changeset/nervous-dancers-exist.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Fix the dropdowns overlapping labels in locked figures settings

packages/perseus-editor/src/components/graph-locked-figures/color-select.tsx

@@ -58,6 +58,9 @@ const styles = StyleSheet.create({
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        // Set minWidth to "auto" to prevent the component from bleeding
+        // into the margins. (minWidth is 0 by default.)
+        minWidth: "auto",
     },
 });
 

packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx

@@ -113,7 +113,10 @@ const LockedEllipseSettings = (props: Props) => {
                 <Strut size={spacing.medium_16} />
 
                 {/* Fill opacity */}
-                <LabelMedium tag="label" style={styles.row}>
+                <LabelMedium
+                    tag="label"
+                    style={[styles.row, styles.truncatedWidth]}
+                >
                     fill
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
@@ -171,6 +174,10 @@ const styles = StyleSheet.create({
     spaceUnder: {
         marginBottom: spacing.xSmall_8,
     },
+    truncatedWidth: {
+        // Allow truncation, stop bleeding over the edge.
+        minWidth: 0,
+    },
 });
 
 export default LockedEllipseSettings;

packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx

@@ -129,7 +129,10 @@ const LockedLineSettings = (props: Props) => {
                 <Strut size={spacing.small_12} />
 
                 {/* Line style settings */}
-                <LabelMedium tag="label" style={styles.row}>
+                <LabelMedium
+                    tag="label"
+                    style={[styles.row, styles.truncatedWidth]}
+                >
                     style
                     <Strut size={spacing.xxxSmall_4} />
                     <SingleSelect
@@ -202,6 +205,10 @@ const styles = StyleSheet.create({
     errorText: {
         color: wbColor.red,
     },
+    truncatedWidth: {
+        // Allow truncation, stop bleeding over the edge.
+        minWidth: 0,
+    },
 });
 
 export default LockedLineSettings;

packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx

@@ -79,7 +79,10 @@ const LockedPolygonSettings = (props: Props) => {
                 <Strut size={spacing.medium_16} />
 
                 {/* Fill opacity */}
-                <LabelMedium tag="label" style={styles.row}>
+                <LabelMedium
+                    tag="label"
+                    style={[styles.row, styles.truncatedWidth]}
+                >
                     fill
                     <Strut size={spacing.xxSmall_6} />
                     <SingleSelect
@@ -218,6 +221,10 @@ const styles = StyleSheet.create({
     spaceUnder: {
         marginBottom: spacing.xSmall_8,
     },
+    truncatedWidth: {
+        // Allow truncation, stop bleeding over the edge.
+        minWidth: 0,
+    },
 });
 
 export default LockedPolygonSettings;