fix: sortable table th rendering bug (#1272)

* fix: Safari rendering issues with Sortable Table th * remove redundant styles * Update snapshots --------- Co-authored-by: Howard Edwards <[email protected]>
w3c · Nov 7, 2024 · 77ba7cf · 77ba7cf
1 parent cdd212d
commit 77ba7cf
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/client/components/common/SortableTableHeader/index.js b/client/components/common/SortableTableHeader/index.js
@@ -21,22 +21,17 @@ const SortableTableHeaderButton = styled(Button)`
   color: black;
   font-size: 1rem;
   font-weight: 700;
-  text-align: left;
   width: 100%;
+  height: 100%;
   min-height: 100%;
+  flex: 1 1 auto;
   display: flex;
-  justify-content: space-between;
   align-items: flex-end;
+  justify-content: space-between;
   padding: 0.5rem;
   border-radius: 0;
   margin: 0;
 
-  // Force the button to stretch
-  position: relative;
-  height: stretch;
-  height: -webkit-fill-available;
-  height: -moz-available;
-
   &:hover,
   &:focus {
     color: #0b60ab;

diff --git a/client/tests/e2e/snapshots/saved/_data-management.html b/client/tests/e2e/snapshots/saved/_data-management.html
@@ -421,7 +421,7 @@ <h2>Test Plans Status Summary</h2>
                   scope="col"
                   aria-sort="none"
                   class="css-i93j34">
-                  <button type="button" class="css-ikcenn btn btn-primary">
+                  <button type="button" class="css-1at7njo btn btn-primary">
                     Test Plan<svg
                       aria-hidden="true"
                       focusable="false"
@@ -442,7 +442,7 @@ <h2>Test Plans Status Summary</h2>
                   scope="col"
                   aria-sort="none"
                   class="css-i93j34">
-                  <button type="button" class="css-ikcenn btn btn-primary">
+                  <button type="button" class="css-1at7njo btn btn-primary">
                     Covered AT<svg
                       aria-hidden="true"
                       focusable="false"
@@ -463,7 +463,7 @@ <h2>Test Plans Status Summary</h2>
                   scope="col"
                   aria-sort="descending"
                   class="css-i93j34">
-                  <button type="button" class="css-ikcenn btn btn-primary">
+                  <button type="button" class="css-1at7njo btn btn-primary">
                     Overall Status<svg
                       aria-hidden="true"
                       focusable="false"