From b06ff9071fb76de27459793b4421cc39b4e55c7c Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 17 Jun 2019 12:44:40 -0400
Subject: [PATCH] Add title to LOAs and update TD styling to prevent overflow

---
 styles/sections/_task_order.scss             | 11 +++++++++++
 templates/portfolios/task_orders/review.html |  8 +++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index e124cdae..85502a11 100644
--- a/styles/sections/_task_order.scss
+++ b/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;
diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html
index 478fbaed..8c5f35df 100644
--- a/templates/portfolios/task_orders/review.html
+++ b/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 %}
-                  {{ loa }}
+                  <span title='{{ loa }}'>
+                    {{ loa }}
+                  </span>
                   <br />
                 {% endfor %}
               </td>