[6.x] Table fixes for Safari and Firefox (#12233)

Author: jaygeorge

resources/css/core/utilities.css

@@ -52,6 +52,15 @@
     font-weight: 425;
 }
 
+/* UTILITIES / DECORATION / SHADOWS
+=================================================== */
+@utility shadow-sm-b {
+    box-shadow: 0 3px 2px -1px hsl(0deg 0% 90%), 0 1px 2px hsl(0deg 0% 90%);
+    &:where(.dark, .dark *) {
+        box-shadow: unset;
+    }
+}
+
 /* UTILITIES / STATES
 =================================================== */
 /* Here we typically need a negative outline-offset because of the inner shadow on inputs */
@@ -130,7 +139,7 @@
     @apply bg-white/85 backdrop-blur-sm;
 }
 
-/* UTILITIES / STATES / DECORATION / MASK BACKGROUND
+/* UTILITIES / DECORATION / MASK BACKGROUND
 =================================================== */
 /* Notes...
 
@@ -181,7 +190,7 @@
     }
 }
 
-/* UTILITIES / STATES / DECORATION / ARCHIECTURAL LINES
+/* UTILITIES / DECORATION / ARCHIECTURAL LINES
 =================================================== */
 /* Notes...
 
@@ -283,7 +292,7 @@
     }
 }
 
-/* UTILITIES / STATES / DECORATION / CHECKERBOARD
+/* UTILITIES / DECORATION / CHECKERBOARD
 =================================================== */
 @utility bg-checkerboard {
     --checkerboard-light: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23f3f4f6'/%3E%3C/svg%3E");

resources/css/elements/tables.css

@@ -1,7 +1,6 @@
 /* ==========================================================================
    TABLES
    ========================================================================== */
-
 .data-table {
     @apply w-full max-w-full outline-hidden text-gray-500 antialiased border-separate border-spacing-y-0 min-w-full overflow-x-auto text-start;
 
@@ -29,7 +28,7 @@
     }
 
     tbody {
-        @apply text-sm bg-white dark:bg-gray-900 shadow-sm rounded-xl outline-none;
+        @apply text-sm shadow-sm-b rounded-xl outline-none;
         .contained & {
             @apply shadow-none rounded-none;
         }
@@ -41,19 +40,23 @@
                     @apply ltr:rounded-tl-xl rtl:rounded-tr-xl;
                 }
 
+                td {
+                    @apply border-t border-t-gray-200 dark:border-t-gray-800;
+                }
+
                 td:last-child,
                 th:last-child {
                     @apply ltr:rounded-tr-xl rtl:rounded-tl-xl;
                 }
-
-                td {
-                    @apply border-0;
-                }
             }
 
             &:last-child {
                 @apply border-none;
 
+                td {
+                    @apply border-b border-b-gray-200 dark:border-b-gray-800;
+                }
+
                 td:first-child,
                 th:first-child {
                     @apply ltr:rounded-bl-xl rtl:rounded-br-xl;
@@ -65,17 +68,25 @@
                 }
             }
 
-            &:hover {
-                @apply bg-gray-50 dark:bg-white/2.5;
-            }
-
             th {
                 @apply py-2 ltr:pr-4 rtl:pl-4;
             }
 
             td {
+                @apply bg-white dark:bg-gray-900;
                 @apply pl-4.5 pr-2.5 py-3 border-t border-gray-200 dark:border-white/10;
                 @apply text-gray-900 dark:text-gray-200;
+                &:first-child {
+                    @apply border-s border-s-gray-200 dark:border-s-gray-800;
+                }
+                &:last-child {
+                    @apply border-e border-e-gray-200 dark:border-e-gray-800;
+                }
+            }
+
+            /* When the row is hovered, change the background of all its cells to a hover state color */
+            &:has(:hover) td {
+                @apply bg-gray-50 dark:bg-white/2.5;
             }
         }