[EuiDataGrid] Safari workaround for cell actions hover animation (#6881)

* Annoying Safari workaround for cell actions hover

* changelog

* Link to filed bug in comment

src/components/datagrid/_data_grid_data_row.scss

@@ -38,6 +38,22 @@
       animation-delay: $euiAnimSpeedNormal;
       animation-fill-mode: forwards;
     }
+    /*
+     * For some incredibly bizarre reason, Safari doesn't correctly update the flex
+     * width of the content (when rows are an undefined height/single flex row),
+     * which causes the action icons to overlap & makes the content less readable.
+     * This workaround "animation" forces a rerender of the flex content width
+     *
+     * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
+     */
+    .euiDataGridRowCell__expandContent {
+      animation-name: euiDataGridCellActionsSafariWorkaround;
+      animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲
+      animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
+      animation-timing-function: linear;
+    }
   }
 
   // On focus, directly show action buttons (without animation)
@@ -243,3 +259,14 @@
     width: $euiSizeM;
   }
 }
+@keyframes euiDataGridCellActionsSafariWorkaround {
+  from {
+    width: 100%;
+    flex-basis: 100%;
+  }
+
+  to {
+    width: auto;
+    flex-basis: auto;
+  }
+}

upcoming_changelogs/6881.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed Safari-only bug for single-line row `EuiDataGrid`s, where cell actions on hover would overlap instead of pushing content to the left