From 66fb6311b2f3b8a4adad23d234149e75fe1d49ee Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 18 Jan 2019 14:22:30 -0500
Subject: [PATCH] Fix issue with sorting arrow pushing out alignment of table

---
 styles/elements/_tables.scss                | 4 ++++
 templates/portfolios/members/index.html     | 4 ++--
 templates/portfolios/task_orders/index.html | 4 ++--
 templates/requests/index.html               | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss
index d28e2e42..448e378c 100644
--- a/styles/elements/_tables.scss
+++ b/styles/elements/_tables.scss
@@ -32,6 +32,10 @@
         display: table-cell;
       }
     }
+
+    .sorting-direction {
+      position: absolute;
+    }
   }
 
   tbody {
diff --git a/templates/portfolios/members/index.html b/templates/portfolios/members/index.html
index b3da1cbe..b44ae8a4 100644
--- a/templates/portfolios/members/index.html
+++ b/templates/portfolios/members/index.html
@@ -67,10 +67,10 @@
         <tr>
           <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
             !{ col.displayName }
-            <span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
+            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
               {{ Icon("caret_down") }}
             </span>
-            <span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
+            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
               {{ Icon("caret_up") }}
             </span>
           </th>
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html
index 4951c63d..783c676d 100644
--- a/templates/portfolios/task_orders/index.html
+++ b/templates/portfolios/task_orders/index.html
@@ -26,10 +26,10 @@
             <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
               !{ col.displayName }
               <template v-if="col.sortFunc">
-                <span v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
+                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
                   {{ Icon("caret_down") }}
                 </span>
-                <span v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
+                <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
                   {{ Icon("caret_up") }}
                 </span>
               </template>
diff --git a/templates/requests/index.html b/templates/requests/index.html
index 4e549bac..b0ac66f2 100644
--- a/templates/requests/index.html
+++ b/templates/requests/index.html
@@ -115,10 +115,10 @@
           <tr>
             <th @click.prevent="updateSortValue(column.attr)" v-for="column in getColumns()"scope="col">
               !{ column.displayName }
-              <span v-if="column.attr === sort.columnName && sort.isAscending">
+              <span class="sorting-direction" v-if="column.attr === sort.columnName && sort.isAscending">
                 {{ Icon("caret_down") }}
               </span>
-              <span v-else-if="column.attr === sort.columnName && !sort.isAscending">
+              <span class="sorting-direction" v-else-if="column.attr === sort.columnName && !sort.isAscending">
                 {{ Icon("caret_up") }}
               </span>
             </th>