Shrink max-width of tables in widescreen. Constrict Action column to 80px. Add Action column updates to Members table.

src/docker-compose.yml

@@ -79,6 +79,8 @@ services:
       - POSTGRES_DB=app
       - POSTGRES_USER=user
       - POSTGRES_PASSWORD=feedabee
+    ports:
+      - "5432:5432"
 
   node:
     build:

src/registrar/assets/src/js/getgov/table-domain-requests.js

@@ -116,8 +116,8 @@ export class DomainRequestsTable extends BaseTable {
       <td data-label="Status">
         ${request.status}
       </td>
-      <td class="${ this.portfolioValue ? '' : "width-quarter"}">
+      <td class="width--action-column">
-        <div class="tablet:display-flex tablet:flex-row">
+        <div class="tablet:display-flex tablet:flex-row flex-wrap">
           <a href="${actionUrl}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use>

src/registrar/assets/src/js/getgov/table-domains.js

@@ -56,7 +56,7 @@ export class DomainsTable extends BaseTable {
         </svg>
       </td>
       ${markupForSuborganizationRow}
-      <td class="${ this.portfolioValue ? '' : "width-quarter"}">
+      <td class="${ this.portfolioValue ? '' : "width--action-column"}">
         <a href="${actionUrl}">
           <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
             <use xlink:href="/public/img/sprite.svg#${domain.svg_icon}"></use>

src/registrar/assets/src/js/getgov/table-members.js

@@ -48,18 +48,6 @@ export class MembersTable extends BaseTable {
     // Get whether the logged in user has edit members permission
     const hasEditPermission = this.portfolioElement ? this.portfolioElement.getAttribute('data-has-edit-permission')==='True' : null;
 
-    let existingExtraActionsHeader =  document.querySelector('.extra-actions-header');
-
-    if (hasEditPermission && !existingExtraActionsHeader) {
-      const extraActionsHeader = document.createElement('th');
-      extraActionsHeader.setAttribute('id', 'extra-actions');
-      extraActionsHeader.setAttribute('role', 'columnheader');
-      extraActionsHeader.setAttribute('class', 'extra-actions-header width-5');
-      extraActionsHeader.innerHTML = `
-        <span class="usa-sr-only">Extra Actions</span>`;
-      let tableHeaderRow = this.tableWrapper.querySelector('thead tr');
-      tableHeaderRow.appendChild(extraActionsHeader);
-    }
     return { 
       'hasAdditionalActions': hasEditPermission,
       'UserPortfolioPermissionChoices' : data.UserPortfolioPermissionChoices
@@ -121,15 +109,17 @@ export class MembersTable extends BaseTable {
       <td headers="header-last-active row-header-${unique_id}" data-sort-value="${last_active.sort_value}" data-label="last_active">
         ${last_active.display_value}
       </td>
-      <td headers="header-action row-header-${unique_id}">
+      <td headers="header-action row-header-${unique_id}" class="width--action-column">
+        <div class="tablet:display-flex tablet:flex-row">
           <a href="${member.action_url}">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="/public/img/sprite.svg#${member.svg_icon}"></use>
             </svg>
             ${member.action_label} <span class="usa-sr-only">${member.name}</span>
           </a>
+          <span class="padding-left-1">${customTableOptions.hasAdditionalActions ? kebabHTML : ''}</span>
+        </div>
       </td>
-      ${customTableOptions.hasAdditionalActions ? '<td>'+kebabHTML+'</td>' : ''}
     `;
     tbody.appendChild(row);
     if (domainsHTML || permissionsHTML) {

src/registrar/assets/src/sass/_theme/_base.scss

@@ -1,7 +1,7 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
 
-$widescreen-max-width: 1920px;
+$widescreen-max-width: 1536px; //1920px;
 $widescreen-x-padding: 4.5rem;
 
 $hot-pink: #FFC3F9;
@@ -275,3 +275,7 @@ abbr[title] {
 .width-quarter {
   width: 25%;
 }
+
+.width--action-column {
+  max-width: 80px;
+}

src/registrar/templates/includes/members_table.html

@@ -59,7 +59,7 @@
               role="columnheader"
               id="header-action"
             >
-              <span class="usa-sr-only">Action</span>
+              Action
             </th>
           </tr>
         </thead>