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/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>