fix(ui): safari css rendering issues with table and folder cards (#12531)

Author: JarrodMFlesch

packages/ui/src/elements/FolderView/FolderFileCard/index.scss

@@ -134,13 +134,22 @@
       grid-area: preview;
       aspect-ratio: 1/1;
       background-color: var(--card-preview-bg-color);
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
+      border-top-left-radius: var(--style-radius-s);
+      border-top-right-radius: var(--style-radius-s);
       border-bottom: 1px solid var(--card-border-color);
       display: grid;
       align-items: center;
       justify-content: center;
       pointer-events: none;
+      grid-template-columns: auto 50% auto;
+
+      &:has(.thumbnail) {
+        grid-template-columns: unset;
+      }
+
+      > .icon {
+        grid-column: 2;
+      }
 
       .icon--document {
         pointer-events: none;
@@ -153,6 +162,19 @@
       .thumbnail {
         width: 100%;
         height: 100%;
+        position: relative;
+        border-radius: inherit;
+        > img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: inherit;
+        }
       }
 
       &:has(.thumbnail) {

packages/ui/src/elements/Table/index.scss

@@ -43,15 +43,15 @@
       tr {
         position: relative;
         &:nth-child(odd) {
-          &:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            background: var(--theme-elevation-50);
-            height: 100%;
-            border-radius: var(--style-radius-s);
+          background: var(--theme-elevation-50);
+          border-radius: var(--style-radius-s);
+          td:first-child {
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+          }
+          td:last-child {
+            border-top-right-radius: inherit;
+            border-bottom-right-radius: inherit;
           }
         }
       }