Modify styling for app / env spend table

styles/sections/_reports.scss

@@ -97,4 +97,22 @@
       border-top: 1px solid $color-gray-lighter;
     }
   }
+
+  .reporting-spend-table {
+    &__env-row {
+      &-label {
+        margin-left: $gap * 5;
+      }
+      &--last {
+        & > td {
+          border-bottom: 1px solid black;
+        }
+        &:last-of-type {
+          & > td {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
 }

templates/portfolios/reports/application_and_env_spending.html

@@ -59,9 +59,13 @@
                   <span v-html='formatDollars(application["total_spend_to_date"])'></span>
                 </td>
               </tr>
-              <tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible'>
+              <tr 
+                v-for='(environment, envName, index) in environments[name]' 
+                v-show='application.isVisible'
+                v-bind:class="[ index == Object.keys(environments[name]).length -1 ? 'reporting-spend-table__env-row--last' : '']"
+              >
                 <td>
-                  <span v-html='envName'></span>
+                  <span class="reporting-spend-table__env-row-label" v-html='envName'></span>
                 </td>
                 <td class="table-cell--align-right">
                   <span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>