[DRAFT] #2409: Increase padding under action buttons on stacked tables (mobile view) - [aa] (#3871)

* increasing margin

* Resolved border issue. Fixed margin classes not in quotes

---------

Co-authored-by: CocoByte <nicolle.leclair@gmail.com>

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

@@ -85,7 +85,7 @@ export function generateKebabHTML(action, unique_id, modal_button_text, screen_r
       role="button" 
       id="button-trigger-${action}-${unique_id}"
       href="#toggle-${action}-${unique_id}"
-      class="usa-button usa-button--unstyled text-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary ${mobileOnly ? 'visible-mobile-flex' : ''}"
+      class="usa-button usa-button--unstyled text-underline late-loading-modal-trigger margin-top-1 line-height-sans-5 text-secondary ${mobileOnly ? 'visible-mobile-flex' : ''}"
       aria-controls="toggle-${action}-${unique_id}"
       data-open-modal
     >

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

@@ -119,7 +119,7 @@ export class DomainRequestsTable extends BaseTable {
       <td data-label="Status">
         ${request.status}
       </td>
-      <td data-label="Action" class="width--action-column">
+      <td data-label="Action" class="width--action-column margin-bottom-3">
         <div class="tablet:display-flex tablet:flex-row">
           <a href="${actionUrl}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
             <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

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

@@ -57,7 +57,7 @@ export class DomainsTable extends BaseTable {
         </svg>
       </td>
       ${markupForSuborganizationRow}
-      <td data-label="Action" class="width--action-column">
+      <td data-label="Action" class="width--action-column margin-bottom-3">
         <div class="tablet:display-flex tablet:flex-row flex-align-center margin-right-2">
           <a href="${actionUrl}">
             <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

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

@@ -117,7 +117,7 @@ export class MembersTable extends BaseTable {
       <td class="padding-bottom-0" 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 data-label="Action" class="padding-bottom-0" headers="header-action row-header-${unique_id}" class="width--action-column">
+      <td data-label="Action" class="padding-bottom-0 margin-bottom-3" headers="header-action row-header-${unique_id}" class="width--action-column">
         <div class="tablet:display-flex tablet:flex-row flex-align-center">
           <a href="${member.action_url}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
             <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">

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

@@ -20,16 +20,6 @@ th {
     border-top: none;
   }
 
-  tr {
-    border-bottom: none;
-    border-top: 2px solid color('base-lighter');
-    margin-top: units(2);
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
   td[data-label]:before,
   th[data-label]:before {
     color: color('primary-darker');
@@ -51,49 +41,54 @@ th {
 .dotgov-table {
   width: 100%;
 
-  tbody th {
-    word-break: break-word;
-  }
 
   @include at-media(mobile-lg) {
+    margin-top: units(1); //this doesn't appear to do anything
 
-    margin-top: units(1);
+    //Table header work-break
-
+    tbody th {
-    tr {
+      word-break: break-word;
-      border: none;
     }
 
-    tr:not(.hide-td-borders):not(:last-child) td,
+  }
-    tr:not(.hide-td-borders):not(:last-child) th {
+  
-      border-bottom: 1px solid color('base-lighter');
+  //Table Borders
-    }
+  tr {
+    border: none;
+  }
 
-    thead th,
+  tr:not(.hide-td-borders) {
-    thead th[aria-sort] {
+    border-bottom: 1px solid color('base-lighter');
-      color: color('primary-darker');
+  }
-      border-bottom: 2px solid color('base-light');
-    }
 
-    tbody tr:last-of-type {
+  thead th,
-      td, th {
+  thead th[aria-sort] {
-        border-bottom: 0;
+    color: color('primary-darker');
-      }
+    border-bottom: 2px solid color('base-light');
-    }
+  }
 
+  //No border for the very top element
+  thead tr:first-child th:first-child {
+    border-top: none;
+  }
+
+  //No border for very bottom element
+  tbody tr:last-of-type {
     td, th {
-      padding: units(2) units(4) units(2) 0;
+      border-bottom: 0;
-    }
-
-    // Hack fix to the overly specific selector above that broke utility class usefulness
-    .padding-right-105 {
-      padding-right: .75rem;
-    }
-
-    thead tr:first-child th:first-child {
-      border-top: none;
     }
   }
 
+  td, th {
+    padding: units(2) units(4) units(2) 0;
+  }
+
+  // Hack fix to the overly specific selector above that broke utility class usefulness
+  .padding-right-105 {
+    padding-right: .75rem;
+  }
+
+
   // Sortable headers
   th[data-sortable][aria-sort=ascending],
   th[data-sortable][aria-sort=descending] {