Fix strut CSS for expander cells as well

cee-chen · cee-chen · commit 22b40da01192 · 2024-04-02T09:34:52.000-07:00
diff --git a/src/components/table/table_row_cell.styles.ts b/src/components/table/table_row_cell.styles.ts
@@ -18,15 +18,19 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
 
   const { mobileSizes } = euiTableVariables(euiThemeContext);
 
+  // Unsets the extra strut caused by inline-block display of buttons/icons/tooltips.
+  // Without this, the row height jumps whenever actions are disabled.
+  const hasIcons = `line-height: 1;`;
+
   return {
     euiTableRowCell: css`
       color: ${euiTheme.colors.text};
     `,
-
+    isExpander: css`
+      ${hasIcons}
+    `,
     hasActions: css`
-      /* Unsets the extra strut caused by inline-block display of buttons/icons/tooltips.
-         Without this, the row height jumps whenever actions are disabled. */
-      line-height: 1;
+      ${hasIcons}
 
       /* TODO: Move this to EuiTableCellContent, once we're further along in the Emotion conversion */
       .euiTableCellContent {
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
@@ -132,6 +132,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   const styles = useEuiMemoizedStyles(euiTableRowCellStyles);
   const cssStyles = [
     styles.euiTableRowCell,
+    isExpander && styles.isExpander,
     hasActions && styles.hasActions,
     styles[valign],
     ...(isResponsive
