From 0890e0afd9482384a4f80b49c9b55b9d03d8e114 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Wed, 19 Feb 2025 12:11:51 -0500
Subject: [PATCH] Special alignment for the sort button on the checkbox column

---
 src/registrar/assets/src/sass/_theme/_tables.scss          | 7 +++++--
 .../templates/includes/member_domains_edit_table.html      | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss
index d67b08041..c050f21f1 100644
--- a/src/registrar/assets/src/sass/_theme/_tables.scss
+++ b/src/registrar/assets/src/sass/_theme/_tables.scss
@@ -103,8 +103,8 @@ th {
     }
   }
   @include at-media(tablet-lg) {
-    th[data-sortable] .usa-table__header__button,
-    th[data-sortable] .usa-table__header__button:not([aria-sort]) {
+    th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button,
+    th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) {
       // position next to the copy
       right: auto;
       // slide left to mock a margin between the copy and the icon
@@ -112,6 +112,9 @@ th {
       // fix vertical alignment
       top: units(1.5);
     }
+    th[data-sortable].left-align-sort-button .usa-table__header__button {
+      left: 0;
+    }
   }
 
   // Currently the 'flash' when sort is clicked,
diff --git a/src/registrar/templates/includes/member_domains_edit_table.html b/src/registrar/templates/includes/member_domains_edit_table.html
index fd63e5aa7..a67919413 100644
--- a/src/registrar/templates/includes/member_domains_edit_table.html
+++ b/src/registrar/templates/includes/member_domains_edit_table.html
@@ -45,7 +45,7 @@
       <caption class="sr-only">member domains</caption>
       <thead>
         <tr>
-          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
+          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6 left-align-sort-button"><span class="sr-only">Assigned domains</span></th>
           <!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
           <th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
         </tr>