Styling

styles/sections/_application_list.scss

@@ -24,7 +24,51 @@
     }
   }
 
+  .list-header {
+    margin: 2 * $gap 5 * $gap;
+    padding: inherit;
+    overflow: auto;
+  }
+
   header.accordian__header {
     padding: 1.6rem;
   }
+
+  .icon-link {
+    float: right;
+
+    .icon--info {
+      bottom: -1px;
+      left: 4px;
+    }
+  }
+
+  .left {
+    float: left;
+  }
+
+  table {
+
+    thead {
+      td {
+          font-weight: bold;
+          font-size: 1.4rem;
+          border-top: 0;
+        }
+    }
+
+    tbody {
+      th {
+        font-weight: bold;
+        font-size: 1.6rem;
+      }
+      td {
+        font-size: 1.6rem;
+        border-bottom: 1px solid $color-gray-lightest;
+        border-top: 0;
+        padding: 3 * $gap 2 * $gap;
+      }
+    }
+
+  }
 }

templates/fragments/applications/environments.html

@@ -2,6 +2,7 @@
 
 <div class="application-list-item">
   <header>
+    <div class="list-header">
       <div class='left'>
         <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
       </div>
@@ -9,10 +10,10 @@
         {{ Icon('info') }}
         {{ "portfolios.admin.settings_info" | translate }}
       </a>
+    </div>
   </header>
 
-  <div is='toggler' v-cloak>
-    <template slot-scope='props'>
+  <div>
     <table>
       <thead>
         <tr>
@@ -23,8 +24,10 @@
 
       <tbody>
           {% for environment in application.environments %}
-            <tr>
-              <td v-on:click="props.toggle">{{ environment.name }}</td>
+            <tr is='toggler' v-cloak>
+            <template slot-scope='props'>
+
+              <th v-on:click="props.toggle">{{ environment.name }}</th>
 
               <template v-if="props.isVisible">
                 <span v-on:click="props.toggle" class='icon-link toggle-link'>
@@ -35,18 +38,19 @@
                 <td>Show Members({{ environment.num_users }}){{ Icon('caret_down') }}</td>
               </template>
 
-              <tr v-if="props.isVisible">
+            </template>
+            </tr>
+
+            <tr >
               <td class='accordian__item application-list-item__environment'>
                 <div class='application-list-item__environment__name'>
                   <span>User Name here</span>
                 </div>
               </td>
             </tr>
-
-            </tr>
           {% endfor %}
+
       </tbody>
     </table>
-    </template>
   </div>
 </div>

templates/portfolios/applications/edit.html

@@ -22,10 +22,8 @@
     </div>
   </form>
 
-    <div class="panel">
-      <div class="panel__content">
+    <div class="responsive-table-wrapper panel">
         {% include "fragments/applications/environments.html" %}
-      </div>
       <div class="action-group">
         <a class='icon-link'>
           {{ "portfolios.applications.add_environment" | translate }}