fix: adjust styling

Author: pkulkark

branching_xblock/static/css/branching_xblock.css

@@ -314,6 +314,19 @@
     flex-wrap: wrap;
 }
 
+.branching-scenario .choice-actions__secondary,
+.branching-scenario .choice-actions__primary {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.branching-scenario .choice-actions__primary {
+    margin-left: auto;
+    justify-content: flex-end;
+}
+
 .choice-submit-button {
     border: none;
     background-color: #0f62a1;
@@ -669,6 +682,12 @@
         align-items: stretch;
     }
 
+    .branching-scenario .choice-actions__secondary,
+    .branching-scenario .choice-actions__primary {
+        width: 100%;
+        margin-left: 0;
+    }
+
     .undo-button,
     .reset-button,
     .choice-submit-button,

branching_xblock/static/handlebars/node-editor.handlebars

@@ -78,7 +78,7 @@
 
   <div class="bx-choices {{#if no_branches}}is-hidden{{/if}}" data-role="choices-section">
     <h3 class="bx-section-title">Choices</h3>
-    <div class="bx-help bx-choices-help">When learner selects a choice, its score is added to their total score.</div>
+    <div class="bx-help bx-choices-help">When a learner selects a choice, the score assigned to that choice is added to the total score.</div>
     <div class="choices-container" data-role="choices-container"></div>
     <button type="button" class="bx-btn bx-btn--secondary" data-role="add-choice">Add Choice</button>
   </div>

branching_xblock/static/html/branching_xblock.html

@@ -16,18 +16,22 @@ <h3 class="choices-heading" data-role="choice-heading">Choose Next Step:</h3>
             <form class="choices-form" data-role="choice-form">
                 <div class="choices-list" data-role="choice-list"></div>
                 <div class="choice-actions">
-                    <button type="button" class="undo-button action-secondary btn-secondary" data-role="undo">
-                        Go Back
-                    </button>
-                    <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
-                        Reset
-                    </button>
-                    <button type="button" class="show-report-button action-primary btn-primary" data-role="show-report" style="display: none;">
-                        Show Report
-                    </button>
-                    <button type="submit" class="choice-submit-button action-primary btn-primary" data-role="submit-choice" disabled>
-                        Submit
-                    </button>
+                    <div class="choice-actions__secondary">
+                        <button type="button" class="undo-button action-secondary btn-secondary" data-role="undo">
+                            Go Back
+                        </button>
+                        <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
+                            Reset
+                        </button>
+                    </div>
+                    <div class="choice-actions__primary">
+                        <button type="button" class="show-report-button action-primary btn-primary" data-role="show-report" style="display: none;">
+                            Show Report
+                        </button>
+                        <button type="submit" class="choice-submit-button action-primary btn-primary" data-role="submit-choice" disabled>
+                            Submit
+                        </button>
+                    </div>
                 </div>
             </form>
         </div>