From 41ea9a82698235e5d0086a35d5ec243d4656c8df Mon Sep 17 00:00:00 2001
From: Abe Alam <143724440+abe-alam-ecs@users.noreply.github.com>
Date: Tue, 24 Jun 2025 16:51:54 -0400
Subject: [PATCH] [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>
---
 .../assets/src/js/getgov/table-base.js        |  2 +-
 .../src/js/getgov/table-domain-requests.js    |  2 +-
 .../assets/src/js/getgov/table-domains.js     |  2 +-
 .../assets/src/js/getgov/table-members.js     |  2 +-
 .../assets/src/sass/_theme/_tables.scss       | 77 +++++++++----------
 5 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js
index 54b8db3f1..3f77e0747 100644
--- a/src/registrar/assets/src/js/getgov/table-base.js
+++ b/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
     >
diff --git a/src/registrar/assets/src/js/getgov/table-domain-requests.js b/src/registrar/assets/src/js/getgov/table-domain-requests.js
index c9696c927..a7728b399 100644
--- a/src/registrar/assets/src/js/getgov/table-domain-requests.js
+++ b/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">
diff --git a/src/registrar/assets/src/js/getgov/table-domains.js b/src/registrar/assets/src/js/getgov/table-domains.js
index bb48b31fe..9708b80d6 100644
--- a/src/registrar/assets/src/js/getgov/table-domains.js
+++ b/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">
diff --git a/src/registrar/assets/src/js/getgov/table-members.js b/src/registrar/assets/src/js/getgov/table-members.js
index 613d0293d..d185f0ef5 100644
--- a/src/registrar/assets/src/js/getgov/table-members.js
+++ b/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">
diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss
index 3a5ad9739..c79a69f1e 100644
--- a/src/registrar/assets/src/sass/_theme/_tables.scss
+++ b/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);
-
-    tr {
-      border: none;
+    //Table header work-break
+    tbody th {
+      word-break: break-word;
     }
 
-    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,
-    thead th[aria-sort] {
-      color: color('primary-darker');
-      border-bottom: 2px solid color('base-light');
-    }
+  tr:not(.hide-td-borders) {
+    border-bottom: 1px solid color('base-lighter');
+  }
 
-    tbody tr:last-of-type {
-      td, th {
-        border-bottom: 0;
-      }
-    }
+  thead th,
+  thead th[aria-sort] {
+    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;
-    }
-
-    // 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;
+      border-bottom: 0;
     }
   }
 
+  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] {