Add a little triangle on expanded applications

styles/sections/_reports.scss

@@ -302,12 +302,28 @@
           @include icon-size(12);
           margin-right: $gap;
         }
+
+        .open-indicator {
+          position: absolute;
+          bottom: 0;
+          left: 5 * $gap;
+          width: 0;
+          height: 0;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+
+          border-bottom: 10px solid $color-blue-light;
+        }
       }
 
       th, td {
         border-bottom: none;
       }
 
+      th[scope=rowgroup] {
+        position: relative;
+      }
+
       .spend-table__application__env {
         margin-left: 2 * $gap;
 

templates/portfolios/reports/index.html

@@ -400,7 +400,7 @@
             <tr>
               <th scope='rowgroup'>
                 <button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__application__toggler'>
-                  <template v-if='application.isVisible'>{{ Icon('caret_down') }}</template>
+                  <template v-if='application.isVisible'>{{ Icon('caret_down') }}<div class='open-indicator'></div></template>
                   <template v-else>{{ Icon('caret_right') }}</template>
                   <span v-html='name'></span>
                 </button>