Update class name because it is used on all TO pages, add column for TotalsBox

styles/sections/_task_order.scss

@@ -86,7 +86,7 @@
   min-width: 14rem;
 }
 
-.task-order-summary {
+.task-order {
   margin-top: $gap * 4;
 
   hr {
@@ -102,6 +102,7 @@
 
   .col {
     flex-grow: 1;
+    max-width: 610px;
   }
 
   .h1,
@@ -113,13 +114,19 @@
     margin-top: $gap * 2;
   }
 
+  &.task-order__form {
+    .totals-box {
+      margin-top: 0;
+    }
+  }
+
   .totals-box {
     padding: $gap * 4;
     padding-top: $gap * 2;
     flex-grow: unset;
     margin-left: $gap * 6;
     margin-top: $gap * 3;
-    width: 33.77%;
+    max-width: 336px;
     height: fit-content;
     background-color: $color-gray-lightest;
   }

templates/portfolios/task_orders/review.html

@@ -26,7 +26,7 @@
       <a v-on:click="openModal('submit-to-1')" class="usa-button usa-button-primary" type="submit">Submit task order</a>
   {% endcall %}
 
-  <div class="task-order-summary">
+  <div class="task-order">
 
     {{ SemiCollapsibleText() }}
 
@@ -101,8 +101,9 @@
         </a>
       </div>
     </div>
-
-    {{ TotalsBox(task_order=task_order) }}
+    <div class="col totals">
+      {{ TotalsBox(task_order=task_order) }}
+    </div>
 
   </div>
 

templates/task_orders/edit.html

@@ -91,23 +91,23 @@
   {% endcall %}
 
   <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
-    <div class="task-order-summary">
+    <div>
       {% include "fragments/flash.html" %}
         {% if task_order_id %}
           {% set action = url_for("task_orders.update", portfolio_id=portfolio.id, task_order_id=task_order_id) %}
         {% else %}
           {% set action = url_for("task_orders.update", portfolio_id=portfolio.id) %}
         {% endif %}
-        <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+        <form id="new-task-order" class="task-order task_order__form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
           {{ form.csrf_token }}
 
           {{ SemiCollapsibleText(paragraph="task_orders.new.form_help_text" | translate) }}
 
           <hr>
 
-          <div class="h1">Add your task order</div>
           <div class="row">
             <div class="col">
+              <div class="h1">Add your task order</div>
               {{ TextInput(form.number, validation='taskOrderNumber') }}
 
               <hr>
@@ -339,7 +339,9 @@
               </div>
             {{ UploadInput(form.pdf) }}
           </div>
-          {{ TotalsBox(task_order=task_order) }}
+          <div class="col totals">
+            {{ TotalsBox(task_order=task_order) }}
+          </div>
         </div>
       </form>
     </div>