Add title to LOAs and update TD styling to prevent overflow

styles/sections/_task_order.scss

@@ -31,6 +31,13 @@
 
   table {
     margin-top: 1rem;
+    table-layout: fixed;
+
+    td {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .col {
@@ -46,6 +53,10 @@
     margin-top: $gap * 2;
   }
 
+  .task-order__details {
+    max-width: 65%;
+  }
+
   .totals-box {
     padding: $gap * 4;
     padding-top: $gap * 2;

templates/portfolios/task_orders/review.html

@@ -39,7 +39,7 @@
     {{ "task_orders.review.check_paragraph" | translate }}
   </p>
   <div class="row">
-    <div class="col">
+    <div class="col task-order__details">
       <div class="h4">
         {{ "task_orders.review.task_order_number" | translate }}
       </div>
@@ -55,7 +55,7 @@
         <div>
           {{ "{}".format(clin.jedi_clin_type) | translate}}
         </div>
-        <table>
+        <table class="fixed-table-wrapper">
           <thead>
             <tr>
               <th>{{ "task_orders.review.clins.amount" | translate }}</th>
@@ -80,7 +80,9 @@
               <td>{{ clin.end_date | formattedDate }}</td>
               <td>
                 {% for loa in clin.loas %}
+                  <span title='{{ loa }}'>
                     {{ loa }}
+                  </span>
                   <br />
                 {% endfor %}
               </td>