Merge pull request #1154 from dod-ccpo/add-env-roles-to-app-members-table

Add env role to the app members table and truncate long env names

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 {
+    .env_role {
-      font-weight: $font-normal;
+      width: 50%;
-      font-size: $base-font-size;
+    }
+
+    .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;
+      }
     }
   }
 

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">