diff --git a/app/react/components/datatables/TableHeaderCell.module.css b/app/react/components/datatables/TableHeaderCell.module.css
index 382fddb3b..188d15ed6 100644
--- a/app/react/components/datatables/TableHeaderCell.module.css
+++ b/app/react/components/datatables/TableHeaderCell.module.css
@@ -1,4 +1,4 @@
 /* highlight the sort icons for columns that aren't actively sorting */
-button:not(.sortingActive):hover path {
+.sortable:not(.sortingActive):hover path {
   fill: var(--sort-icon-hover);
 }
diff --git a/app/react/components/datatables/TableHeaderCell.tsx b/app/react/components/datatables/TableHeaderCell.tsx
index f9280ccaf..822447243 100644
--- a/app/react/components/datatables/TableHeaderCell.tsx
+++ b/app/react/components/datatables/TableHeaderCell.tsx
@@ -69,7 +69,8 @@ function SortWrapper({
       type="button"
       onClick={() => onClick(!isSortedDesc)}
       className={clsx(
-        'sortable !bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
+        '!bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
+        styles.sortable,
         isSorted && styles.sortingActive
       )}
     >