From da516554c241f2a2949048c7e149de21ffd172f1 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 31 Oct 2019 15:48:51 -0400
Subject: [PATCH] Add env role to the app members table and truncate long env
 names

---
 styles/components/_portfolio_layout.scss      | 33 +++++++++++++++++--
 templates/applications/fragments/members.html | 15 +++++++--
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 2b4f4358..2102cc2e 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -149,6 +149,11 @@
   .member-list {
     .responsive-table-wrapper {
       margin-bottom: 0;
+
+      table.atat-table {
+        table-layout: fixed;
+        width: 100%;
+      }
     }
 
     input.usa-button.usa-button-primary {
@@ -207,9 +212,31 @@
       margin: 4rem;
     }
 
-    .member-list__subhead {
-      font-weight: $font-normal;
-      font-size: $base-font-size;
+    .env_role {
+      width: 50%;
+    }
+
+    .form-col--two-thirds {
+      width: 66.66%;
+      flex-basis: unset;
+    }
+
+    .row {
+      display: flex;
+      padding-right: $gap;
+
+      .env-role__environment {
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: $font-bold;
+      }
+
+      .env-role__role {
+        white-space: nowrap;
+        display: inline-block;
+      }
     }
   }
 
diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html
index a00b99c0..496469d0 100644
--- a/templates/applications/fragments/members.html
+++ b/templates/applications/fragments/members.html
@@ -95,7 +95,7 @@
             <tr>
               <th>Name</th>
               <th>Application Permissions</th>
-              <th>Environment Access</th>
+              <th class="env_role">Environment Access</th>
             </tr>
           </thead>
           <tbody>
@@ -116,14 +116,23 @@
 
                 <td>
                   {% for perm, value in member.permission_sets.items() %}
-                    {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}<br>
+                    <div>
+                      {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}
+                    </div>
                   {% endfor %}
                 </td>
                 <td>
                   <div class="form-row">
                     <div class="form-col form-col--two-thirds">
                       {% for env in member.environment_roles %}
-                        {{ env.environment_name }}<br>
+                        <div class="row">
+                          <span class="env-role__environment">
+                            {{ env.environment_name }}
+                          </span>
+                          <span class="env-role__role">
+                            : {{ env.role }}
+                          </span>
+                        </div>
                       {% endfor %}
                     </div>
                     <div class="form-col form-col--one-third">