fix: prevent radio criterion shrinking and improve alignment

- Add flexShrink: 0 style to prevent radio button compression - Add align-items-center class for better vertical alignment
openedx · Nov 20, 2024 · fff0b80 · fff0b80
1 parent 76f4143
commit fff0b80
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/containers/CriterionContainer/RadioCriterion.jsx b/src/containers/CriterionContainer/RadioCriterion.jsx
@@ -36,12 +36,13 @@ export class RadioCriterion extends React.Component {
       <Form.RadioSet name={config.name} value={data}>
         {config.options.map((option) => (
           <Form.Radio
-            className="criteria-option"
+            className="criteria-option align-items-center"
             key={option.name}
             value={option.name}
             description={intl.formatMessage(messages.optionPoints, { points: option.points })}
             onChange={this.onChange}
             disabled={!isGrading}
+            style={{ flexShrink: 0 }}
           >
             {option.label}
           </Form.Radio>

diff --git a/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap b/src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap
@@ -6,21 +6,31 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={false}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={false}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2
@@ -34,21 +44,31 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={true}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={true}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2
@@ -62,21 +82,31 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={false}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={false}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2